If statements with Background Colors

Question

Hi i just wanted to see where i am going wrong with these if statements i cant see anything wrong with them, but they do not seem to work as intended which is too switch color when a html button is clicked i am already sure that is working as console displays "Button Clicked" when clicking the button.

 function colorSwitch()
 {
 var thediv = document.getElementsByClassName("light");

 console.log("Button Clicked");

if(thediv[0].style.backgroundColor == "#ff0000")
{
 thediv[0].style.backgroundColor = "#ffff00";
}
if(thediv[0].style.backgroundColor == "#ffff00")
{
 thediv[0].style.backgroundColor = "#00ff00";
}
if(thediv[0].style.backgroundColor == "#00ff00")
{
 thediv[0].style.backgroundColor = "#ff0000";
}

};

Answer 1

You need add the keyword else , otherwise each condition is being met, making you go full circle.

function colorSwitch () {
  var thediv = document.getElementsByClassName("light");

  console.log("Button Clicked");

  if (thediv[0].style.backgroundColor == "#ff0000") {
    thediv[0].style.backgroundColor = "#ffff00";
  }
  else if (thediv[0].style.backgroundColor == "#ffff00") {
    thediv[0].style.backgroundColor = "#00ff00";
  }
  else if (thediv[0].style.backgroundColor == "#00ff00") {
    thediv[0].style.backgroundColor = "#ff0000";
  }
};

Answer 2

One if statement is being asked directly after the other on each click; meaning they're all becoming true as you get further down the method.

Including an else statement is one way to go.

The other way is using an Array of colours, presuming you want a particular order:

 var colors = ["#ff0000", "#ffff00", "#00ff00"]; var switched = 0; function colorSwitch () { var elements = document.getElementsByClassName("light"); elements[0].style.backgroundColor = colors[switched % colors.length]; switched++; }; 

 .light { width: 100px; height: 3em; border-radius: .25em; background-color: grey; color: white; line-height: 3em; text-align: center; cursor: pointer; } 

 <div class="light" onclick="javascript:colorSwitch();">Click Me</div> 

Answer 3

You are overwriting the background color each if block. You need to change it to either an if-else if-else format , switch case, or use an object to select the new color.

function colorSwitch()
{
   var thediv = document.getElementsByClassName("light");

  console.log("Button Clicked");

  if(thediv[0].style.backgroundColor == "#ff0000")
  {
     thediv[0].style.backgroundColor = "#ffff00";
  }
  else if(thediv[0].style.backgroundColor == "#ffff00")
  {
     thediv[0].style.backgroundColor = "#00ff00";
  }
  else if(thediv[0].style.backgroundColor == "#00ff00")
  {
     thediv[0].style.backgroundColor = "#ff0000";
  }
}

or you can do :

var colorMap = {
    "#ff0000": "#ffff00",
    "#ffff00":"#00ff00",
    "#00ff00": "#ff0000"
}
thediv[0].style.backgroundColor = colorMap[thediv[0].style.backgroundColor];

or switch-case :

switch(thediv[0].style.backgroundColor)
{
    case "#ff0000":
        thediv[0].style.backgroundColor = "#ffff00";
        break;
    case "#ffff00":
        thediv[0].style.backgroundColor = "#00ff00";
        break;
    case "#00ff00":
        thediv[0].style.backgroundColor = "#ff0000";
        break;
}

Answer 4

Even if you run this code: thediv[0].style.backgroundColor = "#00ff00" the statement thediv[0].style.backgroundColor == "#00ff00" will return false(at least for my chrome console)

Also, as the other guys pointed out, you need to use else