No importa cómo lo intento, no puedo hacer que funcione. Si uso .getElementById , funciona... pero necesito apuntar a varios divs , así que necesito usar .getElementsByClassName .
Esto es lo que tengo hasta ahora:
function changeBgColor(color){ document.getElementById("background1").style.background = color; } function changeBackground(color){ document.getElementsByClassName("pls-work").style.background = color; } #background1{ background: #c0c0c0; padding: 50px; color: #fafafa; } .background2{ background: #ff7f50; padding: 20px; } .background3{ background: #555; padding: 20px; } <h4>First example</h4> <div id="background1"><p>My background color will change.</p></div> <button onclick="changeBgColor('#222');">This function will work, no problem</button> <br><br> <h4>Second example</h4> <div class="background3 pls-work"><p>My background color and my sibling's won't.</p></div> <div class="background2 pls-work"><p>I am the sibling</p></div> <button onclick="changeBackground('#222');">This will not work</button> He estado buscando en todas partes, pero no puedo encontrar uno en el que usen class en lugar de id .
Agradecería cualquier sugerencia sobre lo que estoy haciendo mal con esto.
getElementsByClassName devuelve un "objeto tipo matriz" de elementos sobre los que debe iterar, a diferencia de getElementById , que devuelve un solo elemento.
Mira esto:
const changeBgColor = () => { const elements = document.getElementsByClassName('color-me'); const color = document.querySelector('input').value; for (let i = 0; i < elements.length; i++) { elements[i].style.backgroundColor = color; } }; <p class='color-me'>Color me!</p> <p>Can't change me..</p> <p class='color-me'>Me too!</p> <input type=color /> <button onclick=changeBgColor()>Click Me</button>La llamada a document.getElementsByClassName("pls-work") devuelve una HTMLCollection de elementos, no un solo elemento. Debe iterar sobre la colección y establecer la propiedad de estilo en cada elemento.
Ver JS: iterando sobre el resultado de getElementsByClassName usando Array.forEach
El método getElementsByClassName devuelve un objeto de colección (NodeList), consulte los documentos aquí . Para hacer lo que quieres hacer, tendrás que hacer lo siguiente:
function changeBackground(color) { let elements = document.getElementsByClassName("pls-work") for (let i = 0; i < elements.length; i++) { elements.item(i).style.background = color } }Consulte los documentos enumerados anteriormente para obtener más información sobre cómo iterar sobre esta colección.