Javascript if instruction to change div

Question

I hope to get help with my IF instruction in javascript. What happens is that it does not change color when a button is pressed.

This is what I am trying to do. When you click the next button, the following should happen:

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

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

If the background color 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);

};

Answer 1

You can simplify this:

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>

Run codeHide result

Answer 2

javascript : -

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

. , ==, =, .