Change the Background of all Elements in a Class

Question

I have a div, when I clicked on it, should turn all the elements in the .counter class to red, but at the moment it does nothing. I believe you have to run through a loop first

Answer 1

In addition to the given answers, I would suggest to apply style changes by adding a class to the elements and going about it via CSS. Applying inline styling takes up some more performance.

function myFunction() {
    var myCounters = document.getElementsByClassName("counter")
    for (var i = 0; i < myCounters.length; i++) {
        console.log(myCounters[i])
        myCounters[i].classList.toggle('red');
        //using '.toggle' will remove the class again upon clicking the button and re-add when clicking again, and so forth. Replace .toggle by .add to only add the class if that's your use-case.
    }
}

And then in your CSS

.counter {
    width: 100px;
    height: 100px;
    background-color: orange;
}
.counter.red {
    background-color: red;
}

If only doing this for a few elements on the page, the performance drawback is negligible. If you're doing this for a lot of elements, i'd suggest doing it via CSS.

Answer 2

You just need to loop and apply styles. Your code is partially correct, some error though, see error at end.

var myCounters = document.getElementsByClassName("counter")

function myFunction() {
  for (var i = 0; i < myCounters.length; i++) {
    console.log(myCounters[i])

    myCounters[i].style.backgroundColor = "red"
  }
}

.counter {
  width: 100px;
  height: 100px;
  background-color: orange;
}

#btn {
  background-color: aqua;
  width: 50px;
  height: 50px;
  position: absolute;
  left: 200px;
  top: 10px;
}

<div class="counter"></div> <br>
<div class="counter"></div> <br>
<div class="counter"></div> <br>
<div class="counter"></div> <br>
<div class="counter"></div>
<div id="btn" onclick="myFunction()">some button</div>

var myCounters = document.getElementsByClassName(counter)

counter should be a string - the name of class

var i - 0

This should be var i = 0;

conole.log(myCounters[i])

Typo - its console

document.getElementsByClassName(i).style.backgroundColor = "red"

variable i is not accessible in myFunction - scope issue

Answer 3

A simpler way would be to have a css variable. The code only needs to change the value of the variable and any class that uses the variable is updated automatically.

For example:

function myFunction(c) {
  document.documentElement.style.setProperty("--counterbg", c);
}

:root {--counterbg: orange;}

.counter {
  width: 100px;
  height:100px;
  background-color:var(--counterbg);
}
#btn {
  width:100px;
  height:50px;
  position:relative;
  display:inline;
}

<button id="btn" onclick="myFunction('red')">Red</button><button id="btn" onclick="myFunction('green')">Green</button><button id="btn" onclick="myFunction('blue')">Blue</button>

<div class="counter"></div> <br>
<div class="counter"></div> <br>
<div class="counter"></div> <br>
<div class="counter"></div> <br>
<div class="counter"></div> 

The variable is defined at the top of the STYLE tag and on the :root element. The .counter style references it using var(--counterbg) (these variables must start with --). The js just needs to change the value of the variable. In this example, I've done three buttons that change the variable to one of three different colours.

Answer 4

Hi you can do this using for/of iteration on DOM lists such nodeList or HTMLCollection. since all recent versions of modern browsers (Safari, Firefox, Chrome, Edge) support it

function myFunction() {
   let counters = document.getElementsByClassName("counter");
   for(let counter of counters){
     counter.style.backgroundColor = 'red';
   }
}

 .counter {
    width: 100px;
    height:100px;
    background-color:orange;
}
#btn {
    background-color:aqua;
    width:50px;
    height:50px;
    position:absolute;
    left:200px;
    top:10px;
}

 <div class="counter"></div> <br>
   <div class="counter"></div> <br>
   <div class="counter"></div> <br>
   <div class="counter"></div> <br>
   <div class="counter"></div> 
   <div id="btn" onClick="myFunction()">
</div>

Answer 5

   function handleClick() {
   var myCounters = document.getElementsByClassName("counter")
   for (var i = 0; i < myCounters.length; i++) {
    myCounters[i].style.backgroundColor = "red"
   }

}

.counter {
  width: 100px;
  height: 100px;
  background-color: orange;
}

#btn {
  background-color: aqua;
  width: 50px;
  height: 50px;
  position: absolute;
  left: 200px;
  top: 10px;
}

<div class="counter"></div> <br>
<div class="counter"></div> <br>
<div class="counter"></div> <br>
<div class="counter"></div> <br>
<div class="counter"></div>
<div id="btn" onclick="handleClick()"></div>