show and hide don’t call any other functions, so they are first on top.
getPlayButton is called from the click handler, so that’s correctly on top of the click handler.
The click handler calls togglePlayButton so togglePlayButton needs to be somewhere above the click handler.
The correct order is:
show
hide
togglePlayButton
getPlayButton
playButtonClickHandler
1 Like
asasass
November 22, 2017, 7:29am
64
What about???
var playButton = document.querySelector(".playButton");
playButton.addEventListener("click", playButtonClickHandler);
asasass:
What about???
That goes below all of them.
1 Like
asasass
November 22, 2017, 7:33am
66
(function iife() {
"use strict";
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();
button.classList.add("playing");
} else {
button.classList.remove("playing");
show(play);
hide(pause);
player.pause();
}
}
function getPlayButton(el) {
while (el.classList.contains("playButton") === false) {
el = el.parentNode;
}
return el;
}
function playButtonClickHandler(evt) {
var button = getPlayButton(evt.target);
togglePlayButton(button);
}
var playButton = document.querySelector(".playButton");
playButton.addEventListener("click", playButtonClickHandler);
}());
asasass
November 22, 2017, 7:34am
67
If those were able to be combined,
Wouldn’t these be able to also?
function playButtonClickHandler(evt) {
var button = getPlayButton(evt.target);
togglePlayButton(button);
}
var playButton = document.querySelector(".playButton");
playButton.addEventListener("click", playButtonClickHandler);
asasass
November 22, 2017, 7:35am
68
I did this entirely wrong.
It is a bad idea to combine them because when you have multiple event listeners, it’s much more difficult to understand what those multiple combined ones are doing.
asasass
November 22, 2017, 7:37am
70
Start from the beginning:
asasass
November 22, 2017, 7:38am
71
How would it look if they were combined?, I’ll probably never use it though.
asasass
November 22, 2017, 7:40am
72
I don’t understand your instructions.
Can we do this step by step.
var playButtons = document.querySelectorAll(".playButton");
playButtons.forEach(function addPlayButtonHandler(el) {
el.addEventListener("click", playButton);
No thank you. I try to avoid making code worse.
First, create an appropriately named function for the event handler.
One called playButtonClickHandler is a good name for that function.
asasass
November 22, 2017, 7:44am
76
Like that?
function playButtonClickHandler (el) {
}
All event handlers receive an event object, usually abbreviated to avoid conflict with IE, as evt.
function playButtonClickHandler (evt) {
...
}
asasass
November 22, 2017, 7:47am
78
Like this?
function playButton(event) {
var button = getButton(event.target);
var player = button.querySelector("audio");
var play = button.querySelector(".play");
var pause = button.querySelector(".pause");
button.classList.add("clicked");
player.volume = 1.0;
if (player.paused) {
hide(play);
show(pause);
player.play();
button.classList.add("playing");
} else {
button.classList.remove("playing");
show(play);
hide(pause);
player.pause();
}
}
function playButtonClickHandler (evt) {
...
}
function getButton(el) {
while (el.classList.contains("playButton") === false) {
el = el.parentNode;
}
return el;
}
var playButtons = document.querySelectorAll(".playButton");
{
el.addEventListener("click", playButton);
});
}());
Push the clickhandler function down, so that it’s the last function among that group of functions
asasass
November 22, 2017, 7:51am
80
I thought, var playButtons is always last?
I didn’t say to push the clickhandler down that far.
asasass
November 22, 2017, 7:55am
83
function getButton(el) {
while (el.classList.contains("playButton") === false) {
el = el.parentNode;
}
return el;
}
function playButtonClickHandler(evt) {
...
}
var playButtons = document.querySelectorAll(".playButton"); {
el.addEventListener("click", playButton);
});
}());
Change the event listener line so that it assigns the clickhandler function, instead of that playButton one.
Then, in the click handler, get the button from the event target evt.target
and execute the togglePlayButton function using that button.