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

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!

CodePudding user response：

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

<div >1</div>
<div >2</div>
<div >3</div>

CodePudding user response：

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 >
    <h2>I am a h2</h2>
    <button onclick="goingDark()">goingDark</button>
    <button onclick="goingLight()">goingLight</button>
</body>

CodePudding user response：

in html file :

<div >1</div>
<div >2</div>
<div >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'
    ...
}

CodePudding user response：

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 >
      <h2 >something</h2>
      <p>whatever you want here</p>
    </div>

    <div >
      <h2 >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