Difference between 2 Javascript codes

Those showPause and showSpeaker functions are correct. Your code was only missing event handlers to use those functions. When we tried to help you in that direction, you suddenly went racing off in some other direction chasing some other completely different and wrong idea.

is this right?

 function playButtonMouseoutHandler(button) {
    var player = button.querySelector("audio");
    var pause = button.querySelector(".pause");
    var speaker = button.querySelector(".speaker");
    player.isPlaying = function() {
      return player.paused === false;
    };
    if (player.isPlaying()) {
      hide(pause);
      show(speaker);
    }
  }

or is this right?

  function showSpeaker(button) {
    var player = button.querySelector("audio");
    var pause = button.querySelector(".pause");
    var speaker = button.querySelector(".speaker");
    player.isPlaying = function() {
      return player.paused === false;
    };
    if (player.isPlaying()) {
      hide(pause);
      show(speaker);
    }
  }

The second.

ok:

What do I do next.

With that code, you have a click handler that is wrongly above other functions. Move it down below all of the other functions in that area.

You are also missing mouseover and mouseout handler functions.

Step one done:

Step 2, where do I place those?

It’s not done yet, as there are still other functions that are wrongly below that handler function.

The handler functions must be the lowest functions in there.

Right before var?

Yes.

Like this?


function getPlayButton(el) {
    while (el.classList.contains("playButton") === false) {
      el = el.parentNode;
    }
    return el;
  }





  function showPause(button) {
    var player = button.querySelector("audio");
    var pause = button.querySelector(".pause");
    var speaker = button.querySelector(".speaker");
    player.isPlaying = function() {
      return player.paused === false;
    };
    if (player.isPlaying()) {
      hide(speaker);
      show(pause);
    }
  }

  function showSpeaker(button) {
    var player = button.querySelector("audio");
    var pause = button.querySelector(".pause");
    var speaker = button.querySelector(".speaker");
    player.isPlaying = function() {
      return player.paused === false;
    };
    if (player.isPlaying()) {
      hide(pause);
      show(speaker);
    }
  }
  
    function showPause(evt) {
    var button = getPlayButton(evt.target);
    playButton(button);
  }

  function showSpeaker(evt) {
    var button = getPlayButton(evt.target);
    playButton(button);
  }
  
    function playButtonClickHandler(evt) {
    var button = getPlayButton(evt.target);
    playButton(button);
  }

  var playButtons = document.querySelectorAll(".playButton");
  playButtons.forEach(function(button) {
    button.addEventListener("click", playButtonClickHandler);
    button.addEventListener("mouseover", playButtonMouseoverHandler);
    button.addEventListener("mouseout", playButtonMouseoutHandler);
  });
}());

That’s how it’s always supposed to be. Check with JSLint and it will say the same.

Speaking of which, there are several issues that I spot in that code with my own eye that need to be fixed, so let’s use JSLint to find and fix all of the things that need to be fixed.

Unused ‘showSpeaker’.
function showSpeaker(button) {

Undeclared ‘playButtonMouseoutHandler’.
button.addEventListener(“mouseout”, playButtonMouseoutHandler);

Undeclared ‘playButtonMouseoverHandler’.
button.addEventListener(“mouseover”, playButtonMouseoverHandler);

Redefinition of ‘showPause’ from line 38.
function showPause(evt) {

When you mouseout of the button, that’s when the showSpeaker function needs to be called. That solves both problems.

How do I fix it.

Below the playButton click handler you need other handler functions, that need to be a mouseover handler function, and a mouseout handler function.

similar to this one?

No, not similar to that. Similar to the click handler function in the https://jsfiddle.net/99j5wjuz/30/ code.

Like this?

  function playButtonClickHandler(evt) {
    var button = getPlayButton(evt.target);
    playButton(button);
  }