Difference between 2 Javascript codes


#227

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.


#228

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);
    }
  }

#229

The second.


#230

ok:
https://jsfiddle.net/99j5wjuz/29/

What do I do next.


#231

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.


#232

Step one done:
https://jsfiddle.net/99j5wjuz/30/


#233

Step 2, where do I place those?


#234

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.


#235

Right before var?


#236

Yes.


#237

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);
  });
}());

#238

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.


#239

Unused 'showSpeaker'.
function showSpeaker(button) {


#240

Undeclared 'playButtonMouseoutHandler'.
button.addEventListener("mouseout", playButtonMouseoutHandler);

Undeclared 'playButtonMouseoverHandler'.
button.addEventListener("mouseover", playButtonMouseoverHandler);

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


#241

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


#242

How do I fix it.


#243

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


#244

similar to this one?
https://jsfiddle.net/8qh0huka/20/


#245

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


#246

Like this?

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