Wow, that’s bad.
Please use other working code that you have which works on multiple buttons as an example, while I take a break.
Wow, that’s bad.
Please use other working code that you have which works on multiple buttons as an example, while I take a break.
We were separating this into 2 pieces.
var playButtons = document.querySelectorAll(".playButton");
playButtons.forEach(function addPlayButtonHandler(el) {
el.addEventListener("click", playButton);
This is the only example I have using multiple buttons which you made.
This is the only player I’ve made that uses multiple buttons.
var playButtons = document.querySelectorAll(".playButton");
playButtons.forEach(function addPlayButtonHandler(el) {
el.addEventListener("click", playButton);
I don’t have any other working code, the only code I have is from you and that’s this.
var playButtons = document.querySelectorAll(".playButton");
playButtons.forEach(function addPlayButtonHandler(el) {
el.addEventListener("click", playButton);
That doesn’t sound like a wise idea, to separate that in to two pieces.
Why on earth would you want to do that? What benefit to the code would that give, separating that in to two pieces?
You said this:
That’s correct. Instead of being a separate function, that code has the clickhandler function embedded within the forEach statement. That might be leading to your confusion, which is partly why it’s better to have it as a separate function.
When referring to this:
var playButtons = document.querySelectorAll(".playButton");
playButtons.forEach(function addPlayButtonHandler(el) {
el.addEventListener("click", playButton);
Me:
How would I separate them?
You:
Currently you have:
playButtons.forEach(function addPlayButtonHandler(el) {
el.addEventListener("click", playButton);
});
Select the code starting from the word “function”, through to the closing curly brace, and cut it out.
Put the name of the function in there instead, so that you have:
playButtons.forEach(addPlayButtonClickHandler);
And then paste the function above it, below the playButton function is best.
That getButton function is used by the playButton function, so the getButton function also needs to move, up above the playButton function.
How would I add:
playButtons.forEach
to this:
var playButtons = document.querySelector(".playButton");
playButton.addEventListener("click", playButtonClickHandler);
How would I add:
playButtons.forEach
to
var playButtons
}
}
function getPlayButton(el) {
while (el.classList.contains("playButton") === false) {
el = el.parentNode;
}
return el;
}
function playButtonClickHandler(evt) {
var button = getPlayButton(evt.target);
playButton(button);
}
var playButtons = document.querySelector(".playButton");
playButton.addEventListener("click", playButtonClickHandler);
});
}());
Currently var playButtons
is using querySelector which retrieves a reference to only a single element.
You want instead to use querySelectorAll which retrieves what is called a nodeList, that is an array-like structure that contains multiple references to all of the elements that match the selector.
var playButtons = document.querySelectorAll (".playButton");
playButton.addEventListener("click", playButtonClickHandler);
});
}());
There must be no space before the opening parenthesis.
Then with playButtons, for each of them you want to do the addEventListener stuff
playButtons.forEach(function (button) {
// do stuff with button, such as button.addEventListener...
});
ReferenceError: playButtons is not defined
[Learn More]
function getPlayButton(el) {
while (el.classList.contains("playButton") === false) {
el = el.parentNode;
}
return el;
}
function playButtonClickHandler(evt) {
var button = getPlayButton(evt.target);
playButton(button);
}
playButtons.forEach(function(button) {
var playButtons = document.querySelectorAll(".playButton");
playButton.addEventListener("click", playButtonClickHandler);
});
}());
You have things around the wrong way, for you are attempting to use the playButtons variable before it has even been defined.
How do I define it?
playButtons.forEach(function(button) {
var playButtons = document.querySelectorAll(".playButton");
button.addEventListener("click", playButtonClickHandler);
});
}());
This should have another var statement?
playButtons.forEach(function(button) {
var playButtons = document.querySelectorAll(".playButton");
button.addEventListener("click", playButtonClickHandler);
});
}());
No it should not have another var statement.
is this part set up correctly?
playButtons.forEach(function(button) {
var playButtons = document.querySelectorAll(".playButton");
button.addEventListener("click", playButtonClickHandler);
});
}());