You’ve gone back to giving link.querySelector(".links")
as an argument to the show function, when it needs instead to be link
that’s given to the show function.
show(link.querySelector(".link"));
You are still giving link.querySelector(".link")
as an argument to the show function, when it needs instead to be link
that’s given to the show function.
i’m confused.
Take some time to read it over then.
function playButtonClickHandler(evt) {
var link = upTo(evt.target, ".playButton")
togglePlayButton(button);
}
show(link.querySelector(".links"));
I need a break.
show(link.querySelector(“link”));
link that’s given to the show function.
I’m not using:
querySelector
That’s right.
Where you currently have link.querySelector(".link")
as an argument to the show function, you need to instead give only link
to that show function.
I still don’t understand.
Find the code that says link.querySelector(".link")
and replace it with the code that is link
The .querySelector(".link")
part is what you need to remove from link.querySelector(".link")
which will leve you only with link
inside of the parenthesis.
And replace with:
show(link);
var link = upTo(button, ".links");
var player = button.querySelector("audio");
var play = button.querySelector(".play");
var pause = button.querySelector(".pause");
button.classList.add("playing");
hide(button.querySelector(".initial"));
show(link);
At last. When you look back over the past 30 posts, is there anything that I should have said to make this clearer to you?
jslint
'upTo' is out of scope.
var link = upTo(button, ".links");
(function iife() {
"use strict";
document.querySelector(".links").classList.add("hide");
function show(el) {
el.classList.remove("hide");
}
function hide(el) {
el.classList.add("hide");
}
function togglePlayButton(button) {
var link = upTo(button, ".links");
var player = button.querySelector("audio");
var play = button.querySelector(".play");
var pause = button.querySelector(".pause");
button.classList.add("playing");
hide(button.querySelector(".initial"));
show(link.querySelector(".links"));
player.volume = 1.0;
if (player.paused) {
hide(play);
show(pause);
player.play();
} else {
show(play);
hide(pause);
player.pause();
}
}
function upTo(el, selector) {
while (el.matches(selector) === false) {
el = el.parentNode;
}
return el;
}
function playButtonClickHandler(evt) {
var button = upTo(evt.target, ".playButton")
togglePlayButton(button);
}
var playButton = document.querySelector(".playButton");
playButton.addEventListener("click", playButtonClickHandler);
}());
The upTo function needs to move up in the code until it is above the function from where you pasted that code.