HTML按钮不是我的javascript工作
问题描述:
我创建一个按钮操作的设定红绿灯, 我有这个HTML和JavaScriptHTML按钮不是我的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的后元素(S):
<input type="button" id="changeBtn"></input>
<script type="text/javascript" src="javasript.js"></script>
+0
非常感谢你,我现在可以看到逻辑,它工作完美 – Dan
答
删除的HTML代码
<button id="changeBtn">Change</button> <input type="button" id="changeBtn" onclick="changestate"</input>
改成这样这部分。
<button id="changeBtn" onclick="changestate()">Change</button>
我相信你的问题是从没有对您输入关闭>
()上具有相同ID的两个元素的onclick您的通话&来了,没有。
转换的onclick = “改变状态” 来的onClick = “改变状态()” – Jobin
检查这链接:-https://codedump.io/share/6BubpXSG1rX/1/traffic-light-with-button-and-array –