No matter how I try it, I can't make it work. If I use .getElementById, it works... but I need to target multiple divs so I need to use .getElementsByClassName.
Here's what I have so far:
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>I've been searching everywhere but I can't find one where they use class instead of id.
I would appreciate any pointers on what I'm doing wrong with this.
getElementsByClassName returns an “array-like object” of elements which you need to iterate over - as opposed to getElementById which returns a single element.
Check this out:
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>The call to document.getElementsByClassName("pls-work") returns an HTMLCollection of elements not a single element. You need to iterate over the collection and set the style property on each element.
See JS: iterating over result of getElementsByClassName using Array.forEach
The getElementsByClassName method returns a collection (NodeList) object, see the docs here. To do what you want to do, you'll have to do the following:
function changeBackground(color) {
let elements = document.getElementsByClassName("pls-work")
for (let i = 0; i < elements.length; i++) {
elements.item(i).style.background = color
}
}
See the docs as listed above for more information on how to iterate over this collection.