Change color of a div based on divs color background

Question

I have a div that I need to change color based on a javascript if-statement. The check is being made by pressing the green divbox and if the background is set to green, the box should change to black background.

Note! I do not wish to use another solution. I am just looking for understanding why this particular solution does not work.

If you activate the lowest positioned function that does work without button click, you need to inactivate the first function.

function changeColorOnReloadIfGreen() {
var x = document.getElementById('box-1');
if (x.style.backgroundColor == 'green') {
  x.style.backgroundColor = 'black';
 }
}

/*********************************************************/
/*
Just for reference, activating below
that changes box-1 to black works (without if-statement).
*/
/*********************************************************/
/*
var x = document.getElementById('box-1')
x.style.backgroundColor = 'black';
*/

.box-1 {
  background-color: green;
  width: 100px;
  height: 100px;
  margin: 30px 0px 0px 30px;
}

<div id="box-1" class="box-1" onclick="changeColorOnReloadIfGreen()"></div>

score 3 · Accepted Answer · answered Apr 30 '18 at 07:03

The reason your code is not working is because you have background-color css in a class. Had it been as a inline css then it would have been detected using x.style.backgroundColor. So, what you can do is, create a new class green and check for the existence of this class and if this class is found add a new class black in the element.

function changeColorOnReloadIfGreen(elem) {
var x = document.getElementById('box-1');
 if (x.classList.contains('green')) {
   x.classList.remove("green");
   x.classList.add("black");
 }
}

.box-1 {
  width: 100px;
  height: 100px;
  margin: 30px 0px 0px 30px;
}
.green {
  background-color: green;
}
.black{
  background-color: black;
}

<div id="box-1" class="box-1 green" onclick="changeColorOnReloadIfGreen(this)"></div>

Asons · Answer 2 · 2018-04-30T07:19:47.883

As you set the background-color in an external CSS, you need getComputedStyle() to get its value.

Furthermore, the returned value is in a rgb() format, so here is a sample that will work

function changeColorOnReloadIfGreen() {
  var x = document.getElementById('box-1');
  var c = window.getComputedStyle(x).getPropertyValue('background-color');
  if (c == "rgb(0, 128, 0)") {
    x.style.backgroundColor = 'black';
  }
}

/*********************************************************/
/*
Just for reference, activating below
that changes box-1 to black works (without if-statement).
*/
/*********************************************************/
/*
var x = document.getElementById('box-1')
x.style.backgroundColor = 'black';
*/

.box-1 {
  background-color: green;
  width: 100px;
  height: 100px;
  margin: 30px 0px 0px 30px;
}

<div id="box-1" class="box-1" onclick="changeColorOnReloadIfGreen()"></div>

If you really need to compare against named colors, like green, you need to do something like this:

Javascript function to convert color names to hex codes

Or do something like this

function changeColorOnReloadIfGreen() {
  var x = document.getElementById('box-1');
  var c = window.getComputedStyle(x).getPropertyValue('background-color');  
  if (c == getNameColorAsRGB('green')) {
    x.style.backgroundColor = 'black';
  }
}

function getNameColorAsRGB(n) {
  var t = document.createElement('div');  
  t.style.backgroundColor = n;
  t.style.display = 'none';
  document.body.appendChild(t);
  var r = window.getComputedStyle(t).getPropertyValue('background-color');
  t.remove();
  return r;
}


/*********************************************************/
/*
Just for reference, activating below
that changes box-1 to black works (without if-statement).
*/
/*********************************************************/
/*
var x = document.getElementById('box-1')
x.style.backgroundColor = 'black';
*/

.box-1 {
  background-color: green;
  width: 100px;
  height: 100px;
  margin: 30px 0px 0px 30px;
}

<div id="box-1" class="box-1" onclick="changeColorOnReloadIfGreen()"></div>

score 0 · Answer 3 · answered Apr 30 '18 at 07:16

Because you set background-color: green; in a CSS class, JavaScript "can't find" the background-color property of your element; simply because there is none. So you can add the background-color to your element by adding style="background-color: green;" to your div:

function changeColorOnReloadIfGreen() {
  var x = document.getElementById('box-1');
  if (x.style.backgroundColor == 'green') {
    x.style.backgroundColor = 'black';
  }
}

/*********************************************************/
/*
Just for reference, activating below
that changes box-1 to black works (without if-statement).
*/
/*********************************************************/
/*
var x = document.getElementById('box-1')
x.style.backgroundColor = 'black';
*/

.box-1 {
  /**background-color: green;*/
  width: 100px;
  height: 100px;
  margin: 30px 0px 0px 30px;
}

<div id="box-1" class="box-1" onclick="changeColorOnReloadIfGreen()" style="background-color: green;"></div>
<!-- Simply add "background-color: green;" via inline style -->

Or add another class to your CSS code and "switch" classes with CSS:

function changeColorOnReloadIfGreen() {
  var x = document.getElementById('box-1');
  if (x.className == 'box-1') {
    x.classList.remove('box-1');
    x.classList.add('box-2');
  }
}

/*********************************************************/
/*
Just for reference, activating below
that changes box-1 to black works (without if-statement).
*/
/*********************************************************/
/*
var x = document.getElementById('box-1')
x.style.backgroundColor = 'black';
*/

.box-1 {
  background-color: green;
  width: 100px;
  height: 100px;
  margin: 30px 0px 0px 30px;
}

.box-2 {
  background-color: black;
  width: 100px;
  height: 100px;
  margin: 30px 0px 0px 30px;
}

<div id="box-1" class="box-1" onclick="changeColorOnReloadIfGreen()"></div>

Change color of a div based on divs color background

3 Answers3