I want the element to be highlighted only when "8k" is pressed not the other buttons,
I know querySelectorAll
is the key but don't know what change to make?
Beginner here. Thanks
Javascript
const image = document.getElementById("c4");
let timeoutID;
document.querySelectorAll(".side-nav button").forEach(item => item.addEventListener("click", dance));
function dance() {
image.classList.add('highlight');
timeoutID = setTimeout(() => {
image.classList.remove('highlight');
clearTimeout(timeoutID);
}, 1000)
}
CSS
.highlight {
box-shadow : 0 4px 8px 0 rgba(218, 51, 119, 0.4), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
HTML
<div class="side-nav">
<button href="#" style="order:3">2k</button>
<button href="#" style="order:2">4k</button>
<button href="#" style="order:4">1080p</button>
<button href="C4" style="order:1">8k</button>
</div>
<div class="column">
<img src="../pics/-vine-3404474.jpg" id="c4">
<img src="../pics/-alina-vilchenko-4550659.jpg" >
<img src="../pics/-ceejay-talam-8836293.jpg">
</div>
Your dance
function is passed an event object when the click occurs, which has a currentTarget
property that is the element that the handler was attached to that caused the event.¹ So you can check if it's the 8k
button and only do the highlighting when it is.
With your current HTML, you could do that with the text content or href
:
function dance(event) {
if (event.currentTarget.textContent === "8k") {
// or: if (event.currentTarget.getAttribute("href") === "C4") {
image.classList.add('highlight');
}
timeoutID = setTimeout(() => {
image.classList.remove('highlight');
clearTimeout(timeoutID);
}, 1000)
}
...but I would add a class or data attribute to the element instead:
<button href="C4" class="do-highlight" style="order:1">8k</button>
Then
if (event.currentTarget.classList.contains("do-highlight")) {
That same value is also available as this
, but using the event.currentTarget
property lets you not worry about what this
value your function is called with.
At the javascript level, there are small changes. When you click on the button you get an event object.
function dance(e) {
if(e.target.innerHTML=="8k"){
image.classList.add('highlight');
timeoutID = setTimeout(() => {
image.classList.remove('highlight');
clearTimeout(timeoutID);
}, 1000);
}
}