Tengo dificultades para usar Javascript para agregar una clase a un botón.
Contexto: tengo varias tarjetas en un formato tipo instragram con una publicación y un botón "me gusta". Quiero agregar una clase de card__like-button que cambia la imagen a un corazón lleno, pero recordé que querySelector solo se aplica al primer elemento, en su lugar, intenté usar querySelectorAll pero ahora el código no se aplica a nada.
Primer intento:
// Controls for active like button let likeButton = document.querySelector(".card__like-button"); // Event listener for like button click likeButton.addEventListener("click", likeButtonClick); // Add class on button click function likeButtonClick() { likeButton.classList.toggle("card__like-button_active"); }segundo intento
// Controls for active like button let likeButton = document.querySelectorAll(".card__like-button"); // Event listener for like button click likeButton.addEventListener("click", likeButtonClick); // Add class on button click function likeButtonClick() { likeButton.classList.toggle("card__like-button_active"); }Creé el siguiente codepen para replicar el problema.
He buscado en el sitio, la documentación de w3schools, etc. y parece que no puedo encontrar lo que estoy haciendo mal.
Debido a que el método document.querySelectorAll devolverá una matriz de detalles de NodeList, consulte aquí , no puede asignar directamente el evento addEventListener a una lista.
En su lugar, debe recorrer cada elemento y asignarle eventos.
document.querySelectorAll(".card__like-button").forEach(ele => { ele.addEventListener("click", likeButtonClick); }); // Add class on button click function likeButtonClick() { this.classList.toggle("card__like-button_active"); }Intentalo :
let likeButtons = document.querySelectorAll(".card__like-button"); Array.from(likeButtons).forEach(ele => { ele.addEventListener("click", likeButtonClick); }); // Add class on button click function likeButtonClick() { this.classList.toggle("card__like-button_active"); }