How to change background color using .getElementsByClassName in JavaScript?-CodePudding

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.

CodePudding user response：

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

CodePudding user response：

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.

CodePudding user response：

getElementsByClassName returns the list of elements , so you can do it two ways

1.mentioning index value in javascript like below snippet

function changeBgColor(color){
        document.getElementById("background1").style.background = color;
    }
 
    function changeBackground(color){
        document.getElementsByClassName("pls-work")[0].style.background = color;
document.getElementsByClassName("pls-work")[0].style.background[1] = 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>

Do iterate over the elements of particular class and add a background color to it

CodePudding user response：

Please Try With this,

first get that element in variable and the loop on it.

function changeBackground(color){
    var elements = document.getElementsByClassName("pls-work")
        for (var i = 0; i < elements.length; i  ) {
            elements[i].style.background=color;
        }
}

CodePudding user response：

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>

CodePudding user response：

Do you just want to change the background-color of the first element?

I prefer to use querySelector

ES5

function changeBackground(color) {
    document.querySelector(".pls-work").style.backgroundColor = color;
}

But if you want to apply all the elements, use getElementsByClassName and forEach

function changeBackground(color){
    document.getElementsByClassName("pls-work").forEach(e => {
        e.style.backgroundColor: color;
    });
}

Notice: if you want to change only background color, use backgroundColor

CodePudding user response：

function changeColor() {
  let cols = document.getElementsByClassName('col1');
  for(i = 0; i < cols.length; i  ) {
    cols[i].style.backgroundColor = 'blue';
  }
}
//maybe type script gives error about style just use //@ts-ignore