There are other more advanced techniques that can be applied though, such as by using a module to init the play button, which can maintain a consistent reference to the play and pause buttons for each button.
You can show me that if itâs not a huge code.
Is there one of these I can make for this?
button.classList.remove("playing");
function hide(el) {
el.classList.add("hide");
}
This doesnât work:
show(playing);
} else {
hide(playing);
This doesnât work either:
add(playing);
} else {
remove(playing);
Do I add this:
var button = button.querySelector(".playing");
It would involve using some kind of module system, which is similar to the IIFE one that weâve been using.
For example:
var playButton = (function playButtonModule() {
var button;
var play;
var pause;
function addEventListeners(button) {
...
}
function initPlayButton(el) {
button = el;
play = button.querySelector("play");
pause = button.querySelector("pause");
addEventListeners(button);
}
return {
init: initPlayButton
};
}());
document.querySelectorAll(".playButton").forEach(function (button) {
playButton.init(button);
});
Itâs a structure similar to that which can be used.
When I want to work on this Iâll let you know.
This is a very good idea, I like it. I just have a couple of other things I want to finish up first with the codes Iâve been working on.
What am I doing wrong here?
The answer to that one is in the console too. Who wouldâve thought.
I remove this:
var button button.querySelector(".playing");
What else needs to be done to use the short syntax?
button.classList.remove("playing");
add(playing);
} else {
remove(playing);
or should I be using this:
show(playing);
} else {
hide(playing);
function show(el) {
el.classList.remove("hide");
}
function hide(el) {
el.classList.add("hide");
}
function togglePlayButton(button) {
var player = button.querySelector("audio");
var play = button.querySelector(".play");
var pause = button.querySelector(".pause");
player.volume = 1.0;
if (player.paused) {
hide(play);
show(pause);
player.play();
show(playing);
} else {
hide(playing);
show(play);
hide(pause);
player.pause();
}
The browser console tells you whatâs not defined on that page.
Updated jsfiddle:
Useless info is useless.
ReferenceError: playing is not defined
[Learn More]
_display:92:9
togglePlayButton
https://fiddle.jshell.net/_display/:92:9
playButtonClickHandler
togglePlayButton
https://fiddle.jshell.net/_display/:93:9
playButtonClickHandler
https://fiddle.jshell.net/_display/:114:7
Loading mixed (insecure) display content âhttp://hi5.1980s.fm/;â on a secure page
[Learn More]
23
ReferenceError: playing is not defined
[Learn More]
_display:95:9
togglePlayButton
https://fiddle.jshell.net/_display/:95:9
playButtonClickHandler
The issue is, I donât know how to set this up cause I never did this type before.
Converting this
button.classList.remove(âplayingâ);
to the short syntax
var button = button.querySelector(".playing");
show(playing);
hide(playing);
Iâve only done this before:
var play = button.querySelector(".play");
var pause = button.querySelector(".pause");
hide(play);
show(pause);
The playing classname is only added to the element. show/hide arenât used for that.
I have to use this:
button.classList.remove("playing");
A short syntax wonât work?
add(playing);
} else {
remove(playing);
You can make a function to do it, but when that function is effectively used only once, and it doesnât help to beneficially simplify things or aid in understanding, thereâs not much point in having that function in the first place.