Esto es probablemente muy simple, pero no puedo hacer que funcione. Tengo 2 encabezados con la misma clase.
<h1 class="heading-title">Hyperspace</h1> <h1 class="heading-title">Hyperspace</h1>También tengo un botón en el que quiero cambiar el color de los encabezados cuando hago clic en él.
const customColor1Btn = document.querySelector(".custom-color-1"); const headings = document.querySelectorAll(".heading-title"); customColor1Btn.addEventListener("click", function () { headings.style.color = "red"; });Funciona cuando cambio el color de solo 1 encabezado, pero nunca puedo hacer que un detector de eventos funcione con más de 1 elemento. Necesito hacer clic en un botón para manipular los estilos de varios elementos.
¿Cómo puedo hacer que funcione?
Document.querySelectorAll devuelve una lista de NodeList
Por lo tanto, debe recorrer todos los encabezados en la Lista de NodeList de headings y cambiar el color de los nodos de encabezado individuales.
const customColor1Btn = document.querySelector(".custom-color-1"); const headings = document.querySelectorAll(".heading-title"); customColor1Btn.addEventListener("click", function () { headings.forEach(h => h.style.color = "red"); }); <h1 class="heading-title">Hyperspace</h1> <h1 class="heading-title">Hyperspace</h1> <button class="custom-color-1">Change color</button>