Javascript - Change colour of div based on current colour

Question

I am trying to change the background colour of a div based on it's current colour, via the click of a button.

For example, if the colour is cyan (#00ffff - it should change to yellow ('ffff00).

If the colour is yellow - it should change to magenta (#ff00ff).

If the colour is magenta - it should revert back to cyan.

I have managed to change the color to yellow from cyan, however I am not sure exactly how to write my if statement (assuming an if statement is the best way?) to change the colours based on the current colour.

  function ColorFunction() { if (light.getItem("backgroundColor") == '#00ffff') { document.getElementById("light").style.backgroundColor = "#ffff00"; } else if (light.getItem("backgroundColor") == '#ffff00') { document.getElementById("light").style.backgroundColor = "#ff00ff"; } else if (light.getItem("backgroundColor") == '#ff00ff') { document.getElementById("light").style.backgroundColor = "00ffff"; } } 

 .main { width:250px; color: #202020; background-color: #d0d0d0; } .light { width: 50px; height: 50px; background-color: #00ffff } #burn { width: 150px; font-style: italic; } #button { font-style: bold; width: 150px; } 

 <h1>Disco Inferno</h1> <div class="light" id="light"> div </div> <button onClick="ColorFunction()">Burn!</button> 

Answer 1

Ok, lets start at the beginning here.

You have an element with the id light but that does not automatically become a variable you can use in javascript. Its easy enough to make it one:

var light = document.getElementById("light");

Then, i'm not even sure where you get getItem from - perhaps it was a guess - but its not a valid method on an HTMLElement

You could do this with light.style.backgroundColor - see the snippet below.

 var colors = ["rgb(0, 255, 255)","rgb(255, 255, 0)","rgb(255, 0, 255)"]; function ColorFunction() { var light = document.getElementById("light"); var curr = light.style.backgroundColor; var next = colors.indexOf(curr)+1; light.style.backgroundColor = colors[next%colors.length]; } 

 <h1>Disco Inferno</h1> <div class="light" id="light" style="background-color:#00FFFF"> Burn, baby burn! </div> <button onClick="ColorFunction()">Burn!</button> 

Answer 2

You could use an object for shifting the colors, after assigning directly a color to the div.

 function ColorFunction() { var colors = { 'rgb(0, 255, 255)': 'rgb(255, 255, 0)', 'rgb(255, 255, 0)': 'rgb(255, 0, 255)', 'rgb(255, 0, 255)': 'rgb(0, 255, 255)' }, element = document.getElementById("light"); element.style.backgroundColor = colors[element.style.backgroundColor]; } 

 .main { width:250px; color: #202020; background-color: #d0d0d0; } .light { width: 50px; height: 50px; background-color: #00ffff; } #burn { width: 150px; font-style: italic; } #button { font-style: bold; width: 150px; } 

 <div class="light" id="light" style="background-color: #00ffff;"></div> <button onClick="ColorFunction()">Burn!</button> 

Answer 3

There is no getItem() that is some made up method. Look at the console and you will see that it is an error. To read background color you should be using style.

var color = elementReference.style.backgroundColor

Now you are relying on a bad feature of JavaScript where you define a variable that matches an id of an element and it is magically a reference to that element.You should not do that. You should define the variable yourself.

var elementReference = document.getElementById("light");

Now the kicker, browsers returning different things when you read color values. SOme hex, some rgb. So checking for color is a bad thing to do. What to do? Use CSS classes.

 function ColorFunction(){ var elem = document.getElementById("light"); if(elem.classList.contains("red")) { elem.classList.remove("red"); elem.classList.add("blue"); } else if(elem.classList.contains("blue")) { elem.classList.remove("blue"); elem.classList.add("green"); } else { elem.classList.remove("green"); elem.classList.add("red"); } } 

 .red { background-color: red;} .blue {background-color: blue;} .green {background-color: green;} 

 <h1>Disco Inferno</h1> <div class="light red" id="light"> div </div> <button onClick="ColorFunction()">Burn!</button> 

Now there are other ways to do the if check with add/remove, but that is the basic idea.