How do I edit the styles of all divs with the same class using javascript?

Question

I'm working on a website to contain my programming projects and such, that will grow as I get more skilled and make more things. I'm implementing a dark mode button that I would like to target all divs with the class "mainBody" however, it currently only targets the one that the dark button is in. I've tried many solutions from stackoverflow and other sites that don't seem to work. Here is the code that only changes one instance:

function goingDark() {
  document.getElementsByClassName("mainBody")[0].style.backgroundColor = "#242526";
  document.getElementsByClassName("mainBody")[0].style.color = "#ffffff";
  document.getElementsByClassName("h2")[0].style.color = "#ffffff";
}


function goingLight() {
  document.getElementsByClassName("mainBody")[0].style.backgroundColor = "#ffffff";
  document.getElementsByClassName("mainBody")[0].style.color = "#000000";
  document.getElementsByClassName("h2")[0].style.color = "#000000";
}

I'm pretty new to Javascript, so any help is greatly appreciated!

You need to loop through all the elements returned by getElementsByClassName. You're only changing the first one in your code. See here https://stackoverflow.com/questions/3871547/iterating-over-result-of-getelementsbyclassname-using-array-foreach — Adam, Sep 11 '22 at 17:58
Personally I prefer to use querySelectorall().forEach https://css-tricks.com/snippets/javascript/loop-queryselectorall-matches/ — Adam, Sep 11 '22 at 18:02
`document.getElementsByClassName("mainBody")[0]` you are *explicitly* instructing the browser to only target the first `.aminBody` it finds. To target all those elements, you must loop through them. Using [`querySelectorAll`](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll) to select the elements seems more convenient than [`getElementsByClassName`](https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName) as the later returns an `HTMLCollection` which doesn't provide a `forEach` method. — ThS, Sep 11 '22 at 18:09

score 1 · Answer 1 · answered Sep 11 '22 at 18:41

1

document.querySelectorAll('.myclass').forEach(item => {
    item.style.setProperty('padding-top', '0', 'important')
    item.style.display = "none";
})

<div class="myclass">1</div>
<div class="myclass">2</div>
<div class="myclass">3</div>

answered Sep 11 '22 at 18:41

K.Nikita

591
4
10

Said Gourida · Answer 2 · 2022-09-11T18:26:27.750

0

in html file :

<div class="myclass">1</div>
<div class="myclass">2</div>
<div class="myclass">3</div>

try like this in js file:

$("#myclass").addClass("mystyle"); 
// or this 
$("#myclass").attr('style', 'padding-top: 0px !important');
// or this 
$("#myclass").css("display","none");

and try this in css file:

#mystyle{
    color:'red'
    ...
}

edited Sep 11 '22 at 18:26

answered Sep 11 '22 at 18:18

Said Gourida

26
5

score 0 · Accepted Answer · answered Sep 11 '22 at 18:40

You have to use querySelectorAll then iterate through the node list with forEach or forLoop or forOf.Possibilies are endless.Hope i could help

let mainBody = document.querySelectorAll(".mainBody")
    let h2 = document.querySelectorAll("h2");
    function goingDark() {
        mainBody.forEach(element => {
            element.style.backgroundColor = "#242526"
            element.style.color = "#ffffff"
        });
        h2.forEach(element => {
            element.style.backgroundColor = "#242526"
            element.style.color = "#ffffff"
        });
    }


    function goingLight() {
        mainBody.forEach(element => {
            element.style.backgroundColor = "#ffffff"
            element.style.color = "#000000"
        });
        h2.forEach(element => {
            element.style.backgroundColor = "#ffffff"
            element.style.color = "#000000"
        });
    }

<body class="mainBody">
    <h2>I am a h2</h2>
    <button onclick="goingDark()">goingDark</button>
    <button onclick="goingLight()">goingLight</button>
</body>

f_iasco · Answer 4 · 2022-09-11T19:31:48.960

let m = document.getElementsByClassName("m");
      let mi = document.getElementsByClassName("mi");

      function goingDark() {
        for ( i = 0; i < m.length; i++) {
          m[i].style.backgroundColor = "#242526";
          m[i].style.color = "#ffffff";
          mi[i].style.color = "#ffffff";
        }
        
      }

      function goingLight() {
        for ( i = 0; i < m.length; i++) {
          m[i].style.backgroundColor = "#ffffff";
          m[i].style.color = "#000000";
          mi[i].style.color = "#000000";
        }
      }

.m{
  background: pink;
  color : red;
  border: 1px solid black;
  margin: 5px;
  }

<div class="m">
      <h2 class="mi">something</h2>
      <p>whatever you want here</p>
    </div>

    <div class="m">
      <h2 class="mi">something</h2>
      <p>whatever you want here</p>
    </div>

    <button onclick="goingDark()">dark</button>
    <button onclick="goingLight()">light</button>

the issue is that when you select by classname in javascript it returns a html dom object list and this becomes what the styles are added to which is non existent so we have to iterate through it. you can use the foreach but then again its your choice.

hope this helps

this worked perfectly, exactly what I needed tysm – bean_frog Sep 11 '22 at 21:08 — bean_frog, Sep 11 '22 at 21:08

How do I edit the styles of all divs with the same class using javascript?

4 Answers4