Cannot change div background color

Question

I am trying to change the background color for my div's with the class "box" with javascript on page load. I am changing the document with getElementsByClassName, but when I load the page nothing happens. I've checked for typos and researched the internet, but really cannot figure this one out...and it's so simple too.

Please help

window.onload = function changeDivColor () {
  document.getElementsByClassName("box").style.backgroundColor = "blue";
};

.box {
  background-color: red;
  display: flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  margin: 5px;
  border-radius: 5%;
}

<html>

<link rel="stylesheet"
  type="text/css"
  href="/Users/skyler/Documents/GitHub/Code/style.css"/>

<script src="javascript.js"> </script>



  <div class="container">
    <div class="box"> <label> <input type="checkbox"> <div class="label-text"></div> </label> </div>
    
  </div>
  
</html>

There are answers already but in future if you get stuck anywhere like this you can try console logging and see what exactly you are accessing and if you are doing it right by using like `console.log(document.getElementsByClassName("box"))` for above example. — MJN, Jun 15 '19 at 02:55

score 3 · Answer 1 · answered Jun 15 '19 at 01:57

document.getElementsByClassName return an array, you need get index 0 for first item

document.getElementsByClassName("box")[0].style.backgroundColor = "blue";

window.onload = function changeDivColor () {
  document.getElementsByClassName("box")[0].style.backgroundColor = "blue";
};

.box {
  background-color: red;
  display: flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  margin: 5px;
  border-radius: 5%;
}

<html>

<link rel="stylesheet"
  type="text/css"
  href="/Users/skyler/Documents/GitHub/Code/style.css"/>

<script src="javascript.js"> </script>



  <div class="container">
    <div class="box"> <label> <input type="checkbox"> <div class="label-text"></div> </label> </div>
    
  </div>
  
</html>

score 2 · Answer 2 · answered Jun 15 '19 at 01:59

2

Alternatively You can use querySelector to get the first element with that class

window.onload = function changeDivColor () {
    document.querySelector(".box").style.backgroundColor = "blue";
};

answered Jun 15 '19 at 01:59

Krishanu

552
3
21

score 0 · Answer 3 · answered Jun 15 '19 at 02:02

You have a syntax error. The method getElementsByClassName returns an array, so you have to target the index of the element you want to manipulate. In this case this should work:

window.onload = function changeDivColor () {
 document.getElementsByClassName("box")[0].style.backgroundColor = "blue";
};

score 0 · Answer 4 · answered Jun 15 '19 at 02:50

Use

window.onload = function changeDivColor () {
  document.getElementsByClassName("box")[0].style.backgroundColor = "blue";
};

.box {
  background-color: red;
  display: flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  margin: 5px;
  border-radius: 5%;
}

<html>

<link rel="stylesheet"
  type="text/css"
  href="/Users/skyler/Documents/GitHub/Code/style.css"/>

<script src="javascript.js"> </script>



  <div class="container">
    <div class="box"> <label> <input type="checkbox"> <div class="label-text"></div> </label> </div>

  </div>

</html>

Cannot change div background color

4 Answers4