Tengo pocas horas en este problema y todavía estoy atascado en él, parece que no puedo encontrar una solución. En resumen, estoy tratando de manipular cada div de un bucle EJS. Simplifiqué el problema para que pueda ser más fácil de entender.
<% for(let i of products) { %> <div> // products irrelevant code </div> <div class="d-flex justify-content-around"> <i class="btn btn-light fas fa-heart fa-lg" id="wishlist" style="color:grey;"></i> </div> <% } %> <script> const heart = document.getElementById("wishlist") heart.addEventListener("click", ()=> { heart.style.color = "red"; }); </script>En mi página de presentación, cuando hago clic en el elemento, cambia el color como debería, pero solo para el primer producto. No estoy seguro de por qué no está golpeando cada div en el bucle. ¿Cómo puedo cambiar el color de cada elemento específico?
Elimine la lista de wishlist de identificación en i y agregue la identificación del container para la división principal.
AddEventListener en el container id div, y modifique el elemento en el que se hizo clic como se muestra en el siguiente código.
const heart = document.getElementById("container"); heart.addEventListener("click", (e) => { const tgt = e.target; if (tgt.classList.contains('fa-heart')) { tgt.style.color = "red"; } }); .red { color: red } <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" /> <div id="container"> <div> // products irrelevant code </div> <div class="d-flex justify-content-around" id="container"> <i class="btn btn-light fas fa-heart fa-lg" style="color:grey;"></i> </div> <div> // products irrelevant code </div> <div class="d-flex justify-content-around"> <i class="btn btn-light fas fa-heart fa-lg" style="color:grey;"></i> </div> <div> // products irrelevant code </div> <div class="d-flex justify-content-around"> <i class="btn btn-light fas fa-heart fa-lg" style="color:grey;"></i> </div> </div>