Difference between 2 Javascript codes

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

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

Thatā€™s right.

When you click on the button, the playButton function starts or stops the playback.
When you mouseover the button, the pause button needs to be shown.
When you mouseout of the button, the speaker needs to be shown.

Where do I place these?

Right where they are?

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

  function playButtonMouseoutHandler(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 playButtonClickHandler(evt) {
    var button = getPlayButton(evt.target);
    playButton(button);
  }

You place the handler functions all grouped together below the other functions in there.
I would put the mouseover and mouseout handlers below the click handler, as thatā€™s the same order that people will be experiencing them too.


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

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

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

When you click on the button, the playButton function starts or stops the playback.
When you mouseover the button, the pause button needs to be shown.
When you mouseout of the button, the speaker needs to be shown.

Itā€™s not working remotely correctly.

You still have adjustments to make to the mouseover and mouseout functions.

What is supposed to happen when you mouseover the button, and when you mouseout of the button?

You can compare it with this one here:

I want you to use your words. Please explain in words what is supposed to happen with them.

mouseover pause

mouseout speaker

press: goes back to play.

Compare that with what the mouseover and mouseout functions currently have in them. Do you see the difference?

There should be no mouseover before you click.

Like it works here:

Itā€™s a big difference.

You are making the mistake of responding to what the current bad code is doing.
What you should instead be doing is to imagine what needs to occur instead.

The mouseover handler needs to show the pause button, which is what the showPause function does.
The mouseout handler needs to show the speaker, which is what the showSpeaker function does.

Currently both of those handlers incorrectly use the playButton function instead.

Can you figure out how to fix that?

Right now I canā€™t figure it out, and it pains me to say that.

In the mouseover handler change playButton to showPause, and in the mouseout function change playButton to showSpeaker.

Speaker is not showing:

onmouseover/mouseout isnā€™t working.

When I hover on the button, the console shows me an error. Clicking on the error I find that you have HTML inline event attributes causing the problem. Remove those HTML inline event attributes.

Thatā€™s what I wanted to do after this step. Good.

Can I get rid of onclick also?

all of them?

onclick="playButton(event)" onmouseover="showPause(event)" onmouseout="showSpeaker(event)"