Estoy tratando de convertir todos los elementos a continuación en verdes al hacer clic en el botón, sin embargo, solo la primera aparición de la clase tiene efecto, el resto no responderá. ¿Alguna solución a esto?
let testArr = document.getElementsByClassName('testclass'); testArr = Object.entries(testArr); document.querySelector('#btn1').onclick = function () { testArr.forEach(switchColor); function switchColor() { testArr = document.querySelector(".testclass"); testArr.style.color = "green"; } } <h1>For each practice</h1> <ul> <li> <p class="testclass">1</p> </li> <li> <p class="testclass">2</p> </li> <li> <p class="testclass">3</p> </li> <li> <p class="testclass">4</p> </li> </ul> <button id="btn1">Click me</button>Como se especifica en DOM4, elementsbyclassname devuelve una HTMLCollection, no una matriz, por lo que forEach no será útil. sí, pero puedes usarlo así
Array.from(document.getElementsByClassName("testclass")).forEach(switchColor); let testArr = document.querySelectorAll('.testclass'); document.querySelector('#btn1').onclick = function () { testArr.forEach(switchColor); function switchColor(item) { item.style.color = "green"; } } <h1>For each practice</h1> <ul> <li> <p class="testclass">1</p> </li> <li> <p class="testclass">2</p> </li> <li> <p class="testclass">3</p> </li> <li> <p class="testclass">4</p> </li> </ul> <button id="btn1">Click me</button>El valor devuelto es una HTMLCollection que, como ha visto, es un objeto similar a una matriz y no un objeto de matriz, por lo que no tiene las funciones de prototipo de matriz, incluido forEach .
Una forma rápida y sencilla de convertir una HTMLCollection en una matriz de elementos es utilizar el operador spread ... en una matriz literal [] : [...collection] .
let elements = document.getElementsByClassName('testclass'); // HTMLCollection let elementArray = [...elements] // Array document.querySelector('#btn1').onclick = function () { elementArray.forEach((element) => element.style.color = "green") } <h1>For each practice</h1> <ul> <li> <p class="testclass">1</p> </li> <li> <p class="testclass">2</p> </li> <li> <p class="testclass">3</p> </li> <li> <p class="testclass">4</p> </li> </ul> <button id="btn1">Click me</button>También reescribí forEach ya que ahora recorre los elementos, no necesitamos volver a seleccionarlos.