JavaScript if 语句改变 Div

Question

我希望在 javascript 中获得有关我的 IF 语句的帮助。发生的事情是单击按钮时它不会改变颜色。

这就是我想要做的。单击下一个按钮时，应该会发生以下情况

如果light div的背景颜色是#ff0000（红色），它应该变成#ffff00（琥珀色）

如果light div的背景颜色是#ffff00（琥珀色），它应该变成#00ff00（绿色）

如果light div的背景颜色是#00ff00（绿色），它应该变成#ff0000（红色）

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

你可以简化很多：

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>

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

即如果你需要在里面使用==，而不是=，它是一个赋值运算符。