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