我目前正在记事本上处理这个问题，但错误不断发生。我的密码怎么了？我正试图让一个onclick按钮用一个对象数组来处理我的红绿灯。
<html>
<head>
<body>
<div style="background:black;width:75px;height:150px;margin:auto;">
<div id="redlight" style="background:#ff0000;width:40px;height:40px;border- radius:40px;margin:auto;"></div>
<div id="yellowlight" style="background:#3F4A00;width:40px;height:40px;border-radius:40px ;margin:auto"></div>
<div id="greenlight" style="background:#044A00;width:40px;height:40px;border-radius:40px;margin:auto"></div>
<button onclick="start()" style="width:75px;height:30px;margin:auto">Motion- Start!</button>
</div>
<script>
var redlight = document.GetElementById(redlight);
var yellowlight = document.GetElementById[yellowlight];
var greenlight = document.GetElementById[greenlight];
var colors = ['#ff0000', '#520202', '#ffff00', '#3F4A00', '#008000', '#044A00']
function start()
if redlight.style.background == colors[0] {
redlight.style.background = colors[1] //switch off red
yellowlight.style.background = colors[2] //switch on yellow
} else if (yellowlight.style.background == "yellow") {
yellowlight.style.background = colors[3] //switch off yellow
greenliight.style.background = color[4] //switch on green
} else
if (greenlight.style.background == "green") {
greenlight.style.background = colors[5] //switch off green
redlight.style.background = colors[0] //switch on red
}
</script>
</head>
</body>
最佳答案
很多错误实际上，我会把它分解，但是首先
TL；博士
以下是工作代码：
<html>
<body>
<div style="background:black;width:75px;height:150px;margin:auto;">
<div id ="redlight" style="background:#ff0000;width:40px;height:40px;border- radius:40px;margin:auto;"></div>
<div id = "yellowlight" style="background:#3F4A00;width:40px;height:40px;border-radius:40px ;margin:auto"></div>
<div id = "greenlight" style="background:#044A00;width:40px;height:40px;border-radius:40px;margin:auto"></div>
<button onclick="start()" style="width:75px;height:30px;margin:auto">Motion- Start!</button>
</div>
<script>
var redlight = document.getElementById('redlight');
var yellowlight = document.getElementById('yellowlight');
var greenlight = document.getElementById('greenlight');
var colors = ["rgb(255, 0, 0)",'rgb(82, 2, 2)','rgb(255, 255, 0)','rgb(63, 74, 0)','rgb(0, 128, 0)','rgb(4, 74, 0)'];
function start() {
if (redlight.style.backgroundColor == colors[0])
{
redlight.style.backgroundColor = colors[1]; //switch off red
yellowlight.style.backgroundColor = colors[2]; //switch on yellow
}
else if (yellowlight.style.backgroundColor == colors[2]) {
yellowlight.style.backgroundColor = colors[3]; //switch off yellow
greenlight.style.backgroundColor = colors[4]; //switch on green
}
else if (greenlight.style.backgroundColor == colors[4]) {
greenlight.style.backgroundColor = colors[5]; //switch off green
redlight.style.backgroundColor = colors[0]; //switch on red
}
}
</script>
</body>
首先，
GetElementById不起作用，你必须这样写其次，您需要在函数周围使用大括号（
getElementById）第三，whatch out，style.background返回rgb中的颜色。所以，我改变了你的颜色数组的值，把它们放到rgb中。
第四，注意变量名，你犯了很多错误。
{}被命名为start一次。此外，您还命名了greenlight数组greenliight一次。比较我的代码和你的代码并修复。祝您今天过得愉快