Having this code:
let ev = document.querySelectorAll('.event p')
for (let i = 0; i < ev.length; i++) {
ev[i].addEventListener("click", function (e) {
// add this only for current clicked elem
e.currentTarget.src = './icon.png';
// And the rest of items should have this:
ev[i].src = './warning.png';
});
}
How can i change warning.png to all elements in this loop, but change src for element to have icon.png that was clicked? So kind of toggle. My code is not working as expected. Thanks.
You can reuse ev inside the event listener, like this: ev.forEach(evt => evt.src = './warning.png');
If the list of .event p changes, recalculate the list again, e.g. put ev = document.querySelectorAll('.event p') inside the listener.
let ev = document.querySelectorAll('.event p')
for (let i = 0; i < ev.length; i++) {
ev[i].addEventListener("click", function (e) {
// Change the icon for all items
ev.forEach(evt => evt.src = './warning.png');
// then change the icon for the current item
e.currentTarget.src = './icon.png';
});
}
The issue is that the statement ev[i].src = './warning.png'; within the for loop is overriding e.currentTarget.src = './icon.png'; . The solution here is changing all the elements within the for loop, and outside the loop change the icon ONLY for the targetted event.
let ev = document.querySelectorAll('button');
console.log(ev);
// Add event listener to each element
for (let i = 0; i < ev.length; i++) {
ev[i].addEventListener('click', (e) => {
for (let i = 0; i < ev.length; i++) {
// Change icon for all the elements
ev[i].src = './warning.png';
}
// Change icon only for targetted event
e.target.src = './icon.png';
});
}
Also, changed currentTarget to target since target is going to specifically get the element that triggered the event, whereas using currentTarget we can run into confusion in certain scenarios, because it will get the element that the event listener is attached to.
In your code after the click event on element, that element's src is changing but later on it is changing again to ./warning.png. Rearranging them will solve the problem.
let ev = document.querySelectorAll('.event p');
const evLen = ev.length;
for (let i = 0; i < evLen; i++) {
ev[i].addEventListener("click", function (e) {
ev[i].src = './warning.png';
this.src = './icon.png';
});
}