CODEWITHSUNDEEP
javascriptcsscolorsbackgroundonclick
Aleks
Aleks

Reputation: 111

change background color with JavaScript

I have a main div containing n * n divs which have either a black background or a white one.

I want them to change their BGcolor by clicking on the main div.

Here's my code (that doesn't work obviously).

    function invert(){


   var divs = document.getsElementsByTagName("div");

   for(i=0; i<divs.length; i++){
          if(divs[i].style.backgroundColor=="black")
          {
            divs[i].style.backgroundColor="white";
          }
          else if (divs[i].style.backgroundColor=="white") 
          {
            divs[i].style.backgroundColor="black";
          }



   }

}

Upvotes: 1

Views: 2299

Answers (4)

defend orca
defend orca

Reputation: 743

Now 2020, and I find the real solution, get the style and set style must use a different method: 

function changeColor(cell) {
    var red = "rgba(255, 4, 10, 1)"; //rgba or rgb, so if you really want to use this, you need use regexp. 
    var grey = "rgba(230, 230, 230, 1)"; //pls change your css to this too.


    var style = cell.computedStyleMap().get('background-color').toString();

    if (style == grey) {
        cell.style.backgroundColor = red;
    } else if (style == red) {
        cell.style.backgroundColor = grey;
    }
}

for chrome this is ok, but, maybe other browser with other color format, you need test it.

Upvotes: 0

L777
L777

Reputation: 8457

Two ways to achieve this:

1- style.backgroundColor (if you let the bg color info inline):

function turnthelights() {
  
var x = document.querySelectorAll(".inner");
var i;
for (i = 0; i < x.length; i++) {
  
if (x[i].style.backgroundColor === "black"){
    x[i].style.backgroundColor = "white";
} else {
    x[i].style.backgroundColor = "black";      
}
}  
}
body {
  background-color: greenyellow;  
}

.inner {
  width: 80px;
  height: 80px;
  display: inline-block;  
  outline: 2px solid gold;
}
<div id=container onclick="turnthelights()"> 
  
<div class="inner" style="background-color: black"></div>  
<div class="inner" style="background-color: white"></div>  
<div class="inner" style="background-color: black"></div>  
<div class="inner" style="background-color: white"></div>  
<div class="inner" style="background-color: black"></div>
<div class="inner" style="background-color: white"></div>
  
</div>

2- getComputedStyle(element).backgroundColor (bg color info anywhere):

function turnthelights() {
  
var x = document.querySelectorAll(".inner");
var i;
for (i = 0; i < x.length; i++) {

  var k = x[i];
  var z = getComputedStyle(k).backgroundColor;
  
if (z == "rgb(0, 0, 0)"){
    x[i].style.backgroundColor = "rgb(255, 255, 255)";
} else {
    x[i].style.backgroundColor = "rgb(0, 0, 0)";      
}
}  
}
body {
  background-color: hotpink;  
}

.inner {
  width: 80px;
  height: 80px;
  display: inline-block;  
  outline: 2px solid gold;
}

.black {
  background-color: rgb(0, 0, 0);  
}

.white {
  background-color: rgb(255, 255, 255);  
}
<div id=container onclick="turnthelights()"> 
  
<div class="inner black"></div>  
<div class="inner white"></div>  
<div class="inner black"></div>  
<div class="inner white"></div>  
<div class="inner black"></div>
<div class="inner white"></div>
  
</div>

Upvotes: 0

Rick Hitchcock
Rick Hitchcock

Reputation: 35670

Give all the DIVs a default background color of white.

Add a black class to some of them.

Use classList.toggle to alternate the colors:

document.body.onclick= function() {
  var divs= document.querySelectorAll('div');
  for(var i = 0 ; i < divs.length ; i++) {
    divs[i].classList.toggle('black');
  }
}
body, html {
  height: 100%;
  background: lightyellow;
}

div {
  width: 50px;
  height: 50px;
  border: 1px solid #333;
  display: inline-block;
  background: white;
}

.black {
  background: black;
}
<div class="black"></div>
<div></div>
<div class="black"></div>
<div></div>
<div class="black"></div>
<div class="black"></div>
<div></div>
<div></div>

Upvotes: 1

wero
wero

Reputation: 32980

If you haven't explicitly set a background color it may still be "" (at least that is what I see in Firefox) so none of your if condition matches.

Instead you could also switch to black if you detect that the current color is not set:

var color = divs[i].style.backgroundColor;  
if (color === "black")
    divs[i].style.backgroundColor = "white";
else if (!color || color === "white") 
    divs[i].style.backgroundColor = "black";

Upvotes: 1

Related Questions