It doesn’t matter. You weren’t following the instructions that I gave you, so bad stuff has occurred.
Go back to the working code at https://jsfiddle.net/mntrmfsb/143/ and follow through with the instructions.
I checked to see if there was a deficiency in that, and I did.
It would have only worked if I kept them all the same color and never changed them.
hide needs to stay on play.
Okay, let’s do it another way instead.
Instead checking if the play button is hidden, we can check to see if the pause button is not hidden.
Then with the showPause and showSpeaker functions, we can go back to checking if the play button is hidden.
function isPaused(button) {
var pause = getPause(button);
return pause.classList.contains("hide");
}
// ...
function playButton(button) {
// ...
if (!isPaused(button)) {
That will work while having the play button remain hidden.
This goes where?
if (!isPaused(button)) {
function playButton(button) {
var player = button.querySelector("audio");
if (isPlaying(player)) {
showPlayButton(button);
pauseAudio(player);
} else {
showPauseButton(button);
playAudio(player);
}
}
As is shown in the code example, it goes inside of the playButton() function, replacing the existing if statement that’s in there.
function playButton(button) {
var player = button.querySelector("audio");
if (isPlaying(player)) {
showPlayButton(button);
pauseAudio(player);
if (!isPaused(button)) {
showPauseButton(button);
playAudio(player);
}
}
Nope, go back to an earlier playButton() function that works, and have another think about things.
What’s next?
What did I do wrong?
Putting some instrumentation into the showPause() function, I see some interesting reports.
function showPause(button) {
console.log("is playing", isPlaying(button), "is paused", isPaused(button));
// ...
When you hover over the initial image, it starts off as:
is playing false is paused true
Then when you click on it, it becomes:
is playing false is paused false
Which is a state that should not be possible to achieve.
Time to dig deeper.
There are two main problems in there.
First, you still have a bad isPlaying() function with audio as its parameter. That function must be removed.
When you do that you’ll see that the initial play button is triggering when you hover over it.
You do not want the hover stuff to ever occur until after you’ve clicked the button, so move these hover event handlers into the playButtonClickHandler() function instead.
button.addEventListener("mouseover", playButtonMouseoverHandler);
button.addEventListener("mouseout", playButtonMouseoutHandler);
function playButtonClickHandler(evt) {
var button = getButtonContainer(evt.target);
playButton(button);
button.addEventListener("mouseover", playButtonMouseoverHandler);
button.addEventListener("mouseout", playButtonMouseoutHandler);
}
function playButtonMouseoverHandler(evt) {
var button = getButtonContainer(evt.target);
showPause(button);
}
function playButtonMouseoutHandler(evt) {
var button = getButtonContainer(evt.target);
showSpeaker(button);
}
var playButtons = document.querySelectorAll(".playButton");
playButtons.forEach(function(button) {
button.addEventListener("click", playButtonClickHandler);
});
}());
You failed to find and remove that bad isPlaying function with audio as the parameter to the function.
Because you failed to do that, you have also failed to experience what prompted the solution.
Find and remove that function that shouldn’t be there.
You’re having me do this now.
Am I? How terrible of me. What is it that I am having you do?