How to Change the Background Color With JavaScript

How do I change the background color with JavaScript?

Modify the JavaScript property document.body.style.background.

For example:

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

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

Note: this does depend a bit on how your page is put together, for example if you're using a DIV container with a different background colour you will need to modify the background colour of that instead of the document body.

How to change in javascript background color from css

You are attempting to set the background colour of the <style> tag. This is not how it works. Instead of setting the style of the <style> tag, you should set the style of the body itself. This W3Schools Article gives an explanation if you need one.

<head>
    <style>
        body {
            background-color: pink;
        }
    </style>
</head>

<body id="1">

    <script>
        document.getElementById("1").style.backgroundColor = "brown";
    </script>
</body>

It's also worth noting you don't need to assign the element to a variable unless you are going to use it later.

How to change background color in javascript

Try this

<div id="factboxes">
    <div id="counter">
       <div class="factbox" id="TotalDiv">
            <div class="counter-value "><?php echo end($total); ?></div>
            <p>Total Number Of Human Count</p>
      </div>
      
       <div class="factbox factboxgap">
            <div class="counter-value "><?php echo end($current); ?></div>
            <p>Current Number Of Human Count</p>
       </div>
       
       <div class="factbox factboxgap">
            <div class="counter-value "><?php echo count($reserve); ?> </div>
            <p>Total Number of Reservation</p>
       </div>
    </div>
</div>

<script>
    if (<?php echo $total; ?> < 85){
        document.getElementById("TotalDiv").style.backgroundColor = "green";
    }
</script>

EDIT: fixed typo in javascript

Change background-color if class contains a value

You can get all your relevant class elements in a collection (using getElementsByClassName) and then convert it to an array (using spread operator). You can then assign background colours using style.backgroundColor property.

I have used a mapping object, that can be useful otherwise you can do individual if checks too. innerText is the property you can use to compare the inner Text of the HTML elements.

let mapping = {
'1' : 'red', '2' : 'green' , '3': 'blue' };

[...document.getElementsByClassName('skill-points')].forEach( x => {
x.style.backgroundColor = mapping[x.innerText];
});

.skill-points {
width: 50px;
padding: 4px;
margin: 4px;
border: 1px solid #000;
text-align: center;
}

<div class="skill-points"> 1 </div> <!-- BG color = red -->
<div class="skill-points"> 2 </div> <!-- BG color = green -->
<div class="skill-points"> 3 </div>

How do I change the background color in JavaScript?

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 to change background color of a div using javascript?

Just check your console log and address the line it says it had an issue with.

There is no such thing as style.background-color, it is style.backgroundColor

Change;

event.target.style.background-color = selectedColor;

to be;

event.target.style.backgroundColor = selectedColor;

Working Snippet:

const gameContainer = document.getElementById("game");

const COLORS = [
  "red",
  "blue",
  "green",
  "orange",
  "purple",
  "red",
  "blue",
  "green",
  "orange",
  "purple"
];


// here is a helper function to shuffle an array
// it returns the same array with values shuffled
// it is based on an algorithm called Fisher Yates if you want ot research more
function shuffle(array) {
  let counter = array.length;

  // While there are elements in the array
  while (counter > 0) {
    // Pick a random index
    let index = Math.floor(Math.random() * counter);

    // Decrease counter by 1
    counter--;

    // And swap the last element with it
    let temp = array[counter];
    array[counter] = array[index];
    array[index] = temp;
  }

  return array;
}

let shuffledColors = shuffle(COLORS);

// this function loops over the array of colors
// it creates a new div and gives it a class with the value of the color
// it also adds an event listener for a click for each card
function createDivsForColors(colorArray) {
  for (let color of colorArray) {
    // create a new div
    const newDiv = document.createElement("div");

    // give it a class attribute for the value we are looping over
    newDiv.classList.add(color);

    // call a function handleCardClick when a div is clicked on
    newDiv.addEventListener("click", handleCardClick);

    // append the div to the element with an id of game
    gameContainer.append(newDiv);
  }
}

// TODO: Implement this function!
function handleCardClick(event) {
  // you can use event.target to see which element was clicked
  let selectedColor = event.target.className;
  event.target.style.backgroundColor = selectedColor;

  }

// when the DOM loads
createDivsForColors(shuffledColors);

#game div {
  border: 1px solid black;
  width: 15%;
  height: 200px;
  margin: 10px;
  display: inline-block;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Memory Game!</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <h1>Memory Game!</h1>
    <div id="game">
    </div>
    <script src="script.js"></script>
  </body>
</html>

How to change background color via javascript?

Your question is little bit unclear. Let me assume this is what you are intending to do . If it is about backgroundColor. set backgroundColor property from Javascript.

function colorBack(){       document.getElementById("div1").style.backgroundColor = "red";    }

<div id="div1" onmouseout="colorBack()">Hi everyone</div>

Change CSS background color when DIV in viewport

Explanation

"When the user scrolls to the TOP of the blue div, the background color of the body changes to red."

$(window).scroll(function() {
  var scroll = $(window).scrollTop();
  if (scroll >= $('#blue').offset().top) {
    $('body').css('background-color', 'red');
  }
  if (scroll >= $('#black').offset().top) {
    $('body').css('background-color', 'blue');
  }
  if (scroll >= $('#black').last().offset().top) {
    $('body').css('background-color', 'green');
  }
});

#blue {
  width: 400px;
  height: 800px;
  background: blue;
}

#black {
  width: 400px;
  height: 800px;
  background: black;
}

#red {
  width: 400px;
  height: 800px;
  background: red;
  margin-bottom: 500px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="blue"></div>
<div id="black"></div>
<div id="red"></div>