Tener este código:
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'; }); }¿Cómo puedo cambiar warning.png a todos los elementos en este ciclo, pero cambiar src para que el elemento tenga icon.png en el que se hizo clic? Así que tipo de alternar. Mi código no funciona como se esperaba. Gracias.
Puede reutilizar ev dentro del detector de eventos, así: ev.forEach(evt => evt.src = './warning.png');
Si la lista de .event p cambia, vuelva a calcular la lista, por ejemplo, coloque ev = document.querySelectorAll('.event p') dentro del oyente.
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'; }); }El problema es que la sentencia ev[i].src = './warning.png'; dentro del bucle for se e.currentTarget.src = './icon.png'; . La solución aquí es cambiar todos los elementos dentro del ciclo for, y fuera del ciclo cambiar el icono SOLO para el evento objetivo.
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'; }); } Además, cambió currentTarget a target ya que target obtendrá específicamente el elemento que desencadenó el evento, mientras que al usar currentTarget podemos confundirnos en ciertos escenarios, porque obtendrá el elemento al que está adjunto el detector de eventos.
En su código, después del evento de clic en el elemento, el src de ese elemento está cambiando, pero luego cambia nuevamente a ./warning.png . Reorganizarlos resolverá el problema.
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'; }); }