如何在红绿灯序列中改变颜色

How to make the colours change in my traffic light sequence

本文关键字：改变 变颜色 红绿灯      更新时间：2023-11-15

在这段代码中，第一个红色交通灯出现了，但当我单击按钮时它不会改变。是的，我知道也有类似的问题，但它们似乎没有帮助。所以如果你能告诉我出了什么问题，我将非常感激

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Task 3</h1>
<p>This is my Traffic Light script</p>
<img id = "light" src="Red Traffic light.jpg">
<button type="button" onclick="changeLights()">Change Lights</button>
<script>
var list = [
    "Red Traffic light.jpg",
    "Red & Yellow Traffic light.jpg",
    "Green Traffic light.jpg",
    "Yellow Traffic light.jpg"
];
var index = 0;
function changeLights() {
    index = index + !
    if (index == list.length - 1) {
        index = 0;
}
var image = document.getElementById("light");
image.src=list[index];
</script>

我在回答中添加了注释以显示更改。

  1. 您尚未关闭changeLights()函数
  2. index+!似乎是拼写错误，请使用index++添加1
  3. 更改if语句，因为它缺少最后一个图像

var list = [
    "http://imgur.com/FHT9OoG.jpg",
    "http://imgur.com/XZ1PxGh.jpg",
    "http://imgur.com/5DUX0Wy.jpg",
    "http://imgur.com/WpeEMZU.jpg"
];
var index = 0;
function changeLights() {
index++ // Add 1 to index.
// If index is more than the array length, reset to 0
// Or you can use: if(index == list.length){
if (index > list.length-1){
index = 0;
}
var image = document.getElementById("light");
image.src=list[index];
}
<img id = "light" src="http://imgur.com/FHT9OoG.jpg">
<button type="button" onclick="changeLights()">Change Lights</button>

如果你有任何问题，请在下面留言，我会尽快回复你。

我希望这能有所帮助。编码快乐！

firefox中的调试器给出以下错误：

SyntaxError: expected expression, got keyword 'if' lights.html:27:4有点神秘，所以我们查看它之前的内容，发现我们键入了!而不是1，所以我们修复了它，然后重试。

SyntaxError: missing } after function body lights.html:32:25，所以我们修复它，然后重试。

您的意思是在changeLights()中将索引增加1吗？看起来您正在将!添加到索引中，并将其转换为字符串。

此外，您没有关闭changeLights()函数（仅关闭了if条件函数）。

当您单击按钮时，请检查您的控制台，查看是否有错误消息。

相关文章：