How do I change the background color in JavaScript?

Question

I am trying to change the background color of the wrapper every time I click the button. When it is clicked, it is supposed to change to a random color that is in the array. Any thoughts for a beginner? Also the CSS was done with SASS so it may not look pretty.

function change_Color() {
  var color = ["blue", "red", "green", "yellow"];
  document.getElementById("wrapper").style.backgroundColor = color;
}

body {
  margin: 0;
}

* {
  box-sizing: border-box;
}

#wrapper {
  width: 100%;
  height: 100vh;
  background-color: skyblue;
  display: flex;
  justify-content: center;
  align-items: center;
  button {
    padding: 10px;
    background: orange;
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 2rem;
    transition: .5s ease;
    &:hover {
      box-shadow: 0 4px 3px 0px rgba(255, 255, 255, 0.8);
      cursor: pointer;
    }
    &:focus {
      outline: 0;
      color: skyblue;
    }
  }
}

<div id="wrapper">
  <button onclick="change_Color()">Click me!</button>
</div>

Does this answer your question? [How do I change the background color with JavaScript?](https://stackoverflow.com/questions/197748/how-do-i-change-the-background-color-with-javascript) — William Prigol Lopes, Jun 02 '20 at 01:52
`backgroundColor = color` you are setting it to the array itself(which ultimately turns it info a joined string) instead of a single vale from the array — Patrick Evans, Jun 02 '20 at 01:55

score 1 · Answer 1 · answered Jun 02 '20 at 01:54

1

To pick a random color just use the Math.random() function:

var colors = ["blue", "red", "green", "yellow"];
var color = colors[Math.floor(Math.random() * colors.length)]
document.getElementById("wrapper").style.backgroundColor = color;

answered Jun 02 '20 at 01:54

Josh Ray

291
2
7

score 1 · Answer 2 · answered Jun 02 '20 at 01:55

1

You can use math.random() to choose random color from your array.

answered Jun 02 '20 at 01:55

Arturas Lapinskas

336
2
14

score 1 · Answer 3 · answered Jun 02 '20 at 03:05

You should try this:

function changeBackground(color) {
   document.body.style.background = color;
}

window.addEventListener("load",function() { changeBackground('red') });

instead of:

function change_Color() {
  var color = ["blue", "red", "green", "yellow"];
  document.getElementById("wrapper").style.backgroundColor = color;
}

Alyona Yavorska · Accepted Answer · 2020-06-02T03:13:43.927

Check this one. I merged body and wrapper in CSS and I gave id for body

var colors = ["red", "blue", "green", "yellow"];
    function changeColor() {
        document.getElementById("body").style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];}

#body {
margin: 0;
box-sizing: border-box;
  width: 100%;
  height: 100vh;
  background-color: skyblue;
  display: flex;
  justify-content: center;
  align-items: center;
}
 button {
    padding: 10px;
    background: orange;
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 2rem;
    transition: .5s ease;
    &:hover {
      box-shadow: 0 4px 3px 0px rgba(255, 255, 255, 0.8);
      cursor: pointer;
    }
    &:focus {
      outline: 0;
      color: skyblue;
    }
  }

<body id='body'>
    <button onclick="changeColor();">Click me!</button>
    </body>

How do I change the background color in JavaScript?

4 Answers4