JavaScript if statement to change Div

Question

I am hoping to get help with my IF statement in javascript. What is happening is that its not changing colour when the button is clicked.

This is what i am trying to do. When the next button is clicked, the following should happen

If the background colour of the light div is #ff0000 (red), it should change to #ffff00 (amber)

If the background colour of the light div is #ffff00 (amber), it should change to #00ff00 (green)

If the background colour of the light div is #00ff00 (green), it should change to #ff0000 (red)

HTML:

<div class="main">
    <h1>Traffic Light</h1>
    <div class="light">
    </div>
    </br>
    <button id="next" onClick="setBgColour" type="button">Next</button>     
</div>

css:

.light 
{
    background-color: #ff0000;
    width: 100px;
    height: 20px;
    margin-left: auto;
    margin-right: auto;
}

JavaScipt:

function setBgColour(){

    if(document.getElementsByClassName("light")[0].style.backgroundColor = '#ff0000')
    {
        document.getElementsByClassName("light")[0].style.backgroundColor = '#ffff00';
    }

    else if (document.getElementsByClassName("light")[0].style.backgroundColor = '#ffff00')
    {
        document.getElementsByClassName("light")[0].style.backgroundColor = '#00ff00';
    }

    else

    document.getElementsByClassName("light")[0].style.backgroundColor = '#ff0000';

}

window.onload = function(){

    document.getElementById('next').addEventListener('click', setBgColour);

};

Also, you actually don't need all that statements - place colors in array, for example.... — sinisake, Oct 03 '15 at 14:07
Depending on the browser, you might not get color values back when reading them in the same format you set them. Log the value of `document.getElementsByClassName("light")[0].style.backgroundColor` to console to see what it actually contains. — CBroe, Oct 03 '15 at 14:15
Why are you writing `` instead of `
`? Where did you get that from? — Mr Lister, Oct 04 '15 at 06:28

Zim84 · Accepted Answer · 2015-10-26T19:33:53.140

You can simplify this a lot:

var lightnumber = 0; // this variable saves the current state of the traffic light
var lights = [
    "#ff0000", "#ffff00", "#00ff00"
]; // this variable saves all possible lights.

setBgColour = function() {
    // at first we decide which colour shall be next, so we increase
    // the lightnumber by one, except, if we are already at green, then we start over at 0
    lightnumber = lightnumber == (lights.length - 1) ? 0 : lightnumber + 1;
    // and here we set the light according to our lightnumber variable
    document.getElementsByClassName("light")[0].style.backgroundColor = lights[lightnumber];
}

.light {
    background-color: #ff0000;
    width: 100px;
    height: 20px;
    margin-left: auto;
    margin-right: auto;
}

<h1>Traffic Light</h1>

<div class="light"></div>
</br>
<button id="next" onClick="setBgColour()" type="button">Next</button>
</div>

This seems to be working, could i ask you to explain the setBgColour function so i can be more understanding of this code? — , Oct 03 '15 at 14:17
I have added a few comments. If you want to know how the questionmark operator works, take a look here: http://stackoverflow.com/questions/1771786/question-mark-in-javascript — Zim84, Oct 03 '15 at 14:20

score 2 · Answer 2 · edited Oct 03 '15 at 14:13

2

Your javascript code should be like this:-

function setBgColour() {

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

    window.onload = function () {
        document.getElementById('next').addEventListener('click', setBgColour);
    };
}

i.e. inside if you need to use ==, not = which is an assignment operator.

edited Oct 03 '15 at 14:13

Tushar

85,780
21
159
179

answered Oct 03 '15 at 14:09

raw_orb

183
1
12

Right i see what youve done there, however changing my code. It still doesnt want to change 'light' when the 'next' button is selected? any ideas – Oct 03 '15 at 14:13
In your html for onclick you have written `setBgColour` while it should be `setBgColour()` because its a function. – raw_orb Oct 03 '15 at 14:21

JavaScript if statement to change Div

2 Answers2