Question

我正在为我的＆＃34;帮助我5岁的儿子做交通灯序列＆＃34; （因为它如此雄辩地说），我已经检查了多个来源，但我无法弄清楚为什么我的代码无法正常工作。

这是：

</body>
<!DOCTYPE html>
<html>

<body>

<img id="light" src="Red.png">

<script>
var list= ['Green.png', 'Yellow.png', 'Red.png']; 
var i = 0;
function lightsCycle() {
    i = i + 1;
    i = i % arr.length;
    if (i == list.length) i = 0; 
    return arr[i];
    var image = document.getElementById(element).src = list[i].src;;
            light.src=list[i];
</script>

<button type = "button" onclick="lightCycle()">Next Light</button>

</html>

Answer 1

<强>错误

您的结束body标记放错地方
您有一个lightsCycle功能但是您正在呼叫lightCycle()（缺少 s ）
您忘记了功能结束时的括号
您正在使用不存在的变量arr
您的代码中间有一个return arr[i];语句。下一行代码不会被执行

请参阅以下代码以获取一个简单示例。我用颜色替换了图像

要使用图像获取代码，请执行以下操作：

用图像路径替换颜色

将<span>替换为<img>

将document.getElementById("light").style.color = nextColor;替换为document.getElementById("light").src = nextColor;

＆＃13;

var list = ['green', 'yellow', 'red'];
var index = 2;

function lightsCycle() {
  document.getElementById("light").style.color = list[++index % list.length];;
}

＆＃13;

<span id="light" style="color: red">●</span>
<button type="button" onclick="lightsCycle()">Next Light</button>

＆＃13;

Answer 2

i = i % arr.length;

应为i % list.length;

var image = document.getElementById(element).src = list[i].src;;

应为var light = document.getElementById("light").src=list[i];

onclick="lightCycle()"

应为onclick="lightsCycle()" 按钮后面需要body标签。不需要带模数的if语句。 light.src=list[i];是重复的。你需要一个关闭括号的功能。返回将阻止src更改。

＆＃13;

<!DOCTYPE html>
<html>

<body>

<img id="light" src="Red.png">

<script>
var list= ['Green.png', 'Yellow.png', 'Red.png']; 
var i = 0;
function lightsCycle() {
    i = i + 1;
    i = i % list.length;
    var light = document.getElementById("light").src = list[i];
}
</script>

<button type = "button" onclick="lightsCycle()">Next Light</button>
</body>
</html>

＆＃13;

这是一个工作版本，修复了很多错误。

交通灯序列

2 个答案: