change background color with JavaScript

Question

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";
          }



   }

}

Please post your html. Also i found a similar question with yoursChange div color with javascript — Aris Constantinou
– Aris Constantinou, Commented Apr 2, 2016 at 10:43

wero · Accepted Answer · 2016-04-02 10:41:39Z

1

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";

answered Apr 2, 2016 at 10:41

wero

33.1k3 gold badges63 silver badges87 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Aleks Over a year ago

I did actually set a back ground explicitly

Rick Hitchcock · Accepted Answer · 2016-04-02 12:11:18Z

1

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>

answered Apr 2, 2016 at 12:11

Rick Hitchcock

35.7k5 gold badges51 silver badges83 bronze badges

1 Comment

Niet the Dark Absol Over a year ago

This is better for a number of reasons. For instance, let's say you decide to change from "black/white" to "dark gray / light gray", you can do so in the CSS without changing one line of JavaScript. Also, many browsers will "translate" white to rgb(255,255,255) when applied as a colour style, making your comparisons fail. Classes are much easier to manage.

L777 · Accepted Answer · 2016-04-02 15:29:28Z

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>

Akshay I · Accepted Answer · 2020-05-06 18:17:54Z

0

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.

edited May 6, 2020 at 18:17

Akshay I

4,2551 gold badge41 silver badges62 bronze badges

answered May 6, 2020 at 9:20

defend orca

7439 silver badges20 bronze badges

Collectives™ on Stack Overflow

change background color with JavaScript

4 Answers 4

1 Comment

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related