JavaScript if语句改变Div

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了JavaScript if语句改变Div，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1955字，纯文字阅读大概需要3分钟。

内容图文

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

这就是我想要做的.单击下一个按钮时,应发生以下情况

如果灯光div的背景颜色为#ff0000(红色),则应更改为#ffff00(琥珀色)

如果灯光div的背景颜色为#ffff00(琥珀色),则应更改为#00ff00(绿色)

如果灯光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);

};

解决方法:

你可以简化这个：

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>

内容总结

以上是互联网集市为您收集整理的JavaScript if语句改变Div全部内容，希望文章能够帮你解决JavaScript if语句改变Div所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端