javascript - get element that was clicked from collection of items

Question

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.

Do another loop on `ev` which is an array of all the others (including current) — IT goldman, Jul 06 '22 at 16:03
Store the current element into a variable, set `src` of the stored object to `warning.png`, then store `e.target` to the variable, and set its `src` to `icon.png`. You can also drop the loop by using [event delegation](https://stackoverflow.com/questions/1687296/what-is-dom-event-delegation). — Teemu, Jul 06 '22 at 16:18
My answer does what you want, there was just a typo in it where the lines were in an incorrect order. I fixed it... Try it out, it should work now — Lzh, Jul 06 '22 at 18:38

Lzh · Accepted Answer · 2022-07-06T18:34:30.657

2

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';
    });
}

edited Jul 06 '22 at 18:34

answered Jul 06 '22 at 16:09

Lzh

3,585
1
22
36

Won't this make the current to have src 'warning.png'? – IT goldman Jul 06 '22 at 16:15
You need to reverse the order of your lines... you should first set warning.png to all and then icon.png to the selected one – WillD Jul 06 '22 at 16:21
Either that or filter ev to exclude the one which has been clicked on – WillD Jul 06 '22 at 16:22
@ITgoldman Yes, the idea is still the same, I fixed by reordering the lines – Lzh Jul 06 '22 at 18:34
@WillD You are correct, I fixed the typo and reordered the lines – Lzh Jul 06 '22 at 18:35

Extraterrestrial · Answer 2 · 2022-07-06T16:19:49.443

0

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';
    });
}

edited Jul 06 '22 at 16:19

answered Jul 06 '22 at 16:12

Extraterrestrial

600
1
6
19

Thanks, but it only works once, when i click on whole set again, icons don't change... – user3573535 Jul 06 '22 at 16:15
But it is triggered after clicking every Element. It is changing the icon . . . – Extraterrestrial Jul 06 '22 at 16:22

Victor Santizo · Answer 3 · 2022-07-07T01:05:45.797

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.

javascript - get element that was clicked from collection of items

3 Answers3