while (el.classList.contains("playButton") === false) {
el = el.parentNode;
}
When the element doesn’t have a classList, that’s when the error occurs. You can deal with that by first checking if the element has made its way up to the document, before checking the classList.
while (el !== document && el.classList.contains("playButton") === false) {
el = el.parentNode;
}
We can improve that further by moving the playButton check out to a separate function too.
function notPlayButton(el) {
return el.classList.contains("playButton") === false;
}
while (el !== document && notPlayButton(el)) {
el = el.parentNode;
}
And it’s usually better if the function name is positive, rather than negative, so let’s check for isPlayButton instead.
function isPlayButton(el) {
return el.classList.contains("playButton") === true;
}
while (el !== document && !isPlayButton(el)) {
el = el.parentNode;
}
What that code does in words is: when climbing parents in the DOM, if we haven’t gone all the way up to the document, and we haven’t yet found the play button, check the next parent.
From the original code that you posted, the only code that you should delete is the while loop, and replace that while-loop code with the code that I posted, which is:
function isPlayButton(el) {
return el.classList.contains("playButton") === true;
}
while (el !== document && !isPlayButton(el)) {
el = el.parentNode;
}
You are correct, that is not what you should be doing.
To repeat what I told you before, replace the while loop with all of the code that I posted, that being:
function isPlayButton(el) {
return el.classList.contains("playButton") === true;
}
while (el !== document && !isPlayButton(el)) {
el = el.parentNode;
}
You will end up with a function that has another function inside of it, and a while loop below it, and below that a return statement. That is all correct.
I will not post the exact code that you need, for that is amazingly lazy. I will instead force you to understand what you are being told.
Throws an error for me when i click the left button. The line in question (button.classList.add("activated") inside showPauseButton) gets executed at least 3 times; the third time through, button is document, and document.classList is not a valid construction.
That’s the magical thing about different web browsers. I refuse though to do anything about it until I receive instructions about which web browser the problem is occurring in. I will not be running the code in 10 different web browsers either to try and figure out which one has the problem.
That way I can test the code in the affected web browser and be sure that the issue is fixed.
It’s nice that the getButtonContainer problem seems to be all fixed.
Thank you @m_hutley for helping us to understand that a problem still exists with the left-most button. My checks on that consisted of clicking the left button, and clicking it again to turn it off.
That was not enough to exhibit the problem.
The problem is experienced by clicking on only the left play button, then while the play button is active and showing pause, moving the mouse off of the pause button.
This is the kind of trouble that occurs when there are no reliable tests for the code. Thanks again.
It’s only the mouseout event that’s happening. It triggers though when passing over every element, such as polygon or svg.
A simple solution to this is to check if the button is document. That occurs when the button container can’t be found. We can just ignore things when that occurs.
function playButtonMouseoverHandler(evt) {
const button = getButtonContainer(evt.target);
if (button === document) {
return;
}
showPause(button);
}
function playButtonMouseoutHandler(evt) {
const button = getButtonContainer(evt.target);
if (button === document) {
return;
}
showSpeaker(button);
}
Is there a better solution where we can get the mouseover or mouseout event to only occur when crossing the boundary of the `.wrapc’ element?