CODEWITHSUNDEEP
javascripthtmlcss
Toolbox
Toolbox

Reputation: 2491

Change color of a div based on divs color background

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>

Upvotes: 2

Views: 2104

Answers (3)

Asons
Asons

Reputation: 87303

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:

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>

Upvotes: 2

CodeF0x
CodeF0x

Reputation: 2682

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>

Upvotes: 0

Ankit Agarwal
Ankit Agarwal

Reputation: 30739

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>

Upvotes: 3

Related Questions