我正在创建一个按钮操作的交通信号灯集,我有这个HTML和JAVASCRIPT
var lightStates = {
red: 0,
amber: 1,
green: 2
};
var currentState = lightStates.red;
document.getElementById('changeBtn').onclick = function() {
changeState();
};
function changeState() {
clear();
switch (currentState) {
case lightStates.red:
{
document.getElementById("red").className = "light red";
currentState = lightStates.amber;
}
break;
case lightStates.amber:
{
document.getElementById("amber").className = "light amber";
currentState = lightStates.green;
}
break;
case lightStates.green:
{
document.getElementById("green").className = "light green";
currentState = lightStates.red;
}
break;
}
}
function clear() {
document.getElementById("red").className = "light off";
document.getElementById("amber").className = "light off";
document.getElementById("green").className = "light off";
}
<html>
<head>
<script type="text/javascript" src=javasript.js></script>
</head>
<link rel="stylesheet" href="style.css">
<div class="traffic-light">
<div class="light off" id="red"></div>
<div class="light off" id="amber"></div>
<div class="light off" id="green"></div>
</div>
<button id="changeBtn">Change</button>
<input type="button" id="changeBtn" onclick="changestate" </input>
</html>
以及css工作表上的指示灯,我遇到的问题是,当我在浏览器中运行代码时,该按钮根本无法执行任何操作,这是怎么回事?
id
值。删除重复的按钮和内联,onclick
并在元素之后添加JavaScript :
<input type="button" id="changeBtn"></input>
<script type="text/javascript" src="javasript.js"></script>
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句