Difference between 2 Javascript codes


#207

2 more of these?

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

#208

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

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

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

#209

Would you stack them like this?

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

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

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

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


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

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

#210

Except, instead of calling playButton, the mouseover handler calls the showPause function, and the mouseout handler calls the showSpeaker function.


#211

No I wouldn't, because the event handlers have functions below them that they use, which should be above them instead.

Move those handler functions down below the other functions.


#212

What did I do wrong?
https://jsfiddle.net/99j5wjuz/24/


#213

Those other event functions that we've been talking about are missing from that code.


#214

huh... Which ones?


#215

The playButtonMouseoverHandler and playButtonMouseoutHandler functions.


#216

I changed one to one

and the other to the other?
function showSpeaker(button) {


#217

I changed the names.

playButtonMouseoverHandle

to

function showPause(button) {

playButtonMouseoutHandler
to
function showSpeaker(button) {


#218

Well that's just wrong. They need to be called the playButtonMouseoverHandler and playButtonMouseoutHandler functions.


#219

I think if you did something like this for now, even if they don't do anything much yet, it would get you past those errors

function playButtonMouseoverHandler(something) { 
  console.log("playButtonMouseoverHandler " + something);
}

#220

https://jsfiddle.net/99j5wjuz/27/


#221

He nearly had them correct in post #209, and instructions on how to make them right were given in post #210


#222

Now what?

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

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


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

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



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

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

#223

You have them the wrong way around now.

The handler functions just need a variable declaration for the button, and to pass that to the function that uses it.
The click handler passes the button to the playButton function. That's good.
The mouseover handler just needs to pass the button to the showPause function
And the mouseout handler just needs to pass the button to the showSpeaker function.


#224

You're confusing me.


#225

I feel like I'm going in circles.

before I had this:

You said it was wrong:

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

You also said this is wrong.

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

#226

When an event occurs, you can assign a function to handle that event, which is called an event handler function.
That event handler receives in its first parameter information about the event. Normally we give that a name of evt.
Each event handler needs to do only two things.
The first is to use information from the event to gain a reference to the button.
And the second, is to call an appropriate function using that button as a function parameter.

That's the whole process of what's going on.