这个红绿灯javascript代码出了什么问题

what is wrong with this traffic light javascript code?

本文关键字：什么 问题 代码 红绿灯 javascript      更新时间：2023-09-26

这段代码是在图片（红绿灯）之间切换，然后重新开始。第一个图像运行良好，但其他图像不会出现。

<head>
<img id="red" src="A452 Images/red light.png" width="255" height="300" />
<button onclick="fnnextimage()">change image</button> 
</head>
<body>
<script>
var imgarray=[];
imgarray[0].src = "A452 Images/red traffic light.png";
imgarray[1].src = "A452 Images/yellow traffic light.png";
imgarray[2].src = "A452 Images/green traffic light.png";
function fnnextimage(){
    var lightchange = 1;
    lightchange = lightchange+1;
    if(lightchange=3){
        lightchange=1};
    document.getElementById('red').src=imgarray[fnnextimage]
}
</script>
</body>
</html>

您的代码包含三个错误：

  1. lightchange应该是一个全局变量，所以您需要在函数上方声明它（就像您对imgarray所做的那样）：

    var imgarray=[];
imgarray[0].src = "A452 Images/red traffic light.png";
imgarray[1].src = "A452 Images/yellow traffic light.png";
imgarray[2].src = "A452 Images/green traffic light.png";
var lightchange = 1;
function fnnextimage(){

  2. if(lightchange=3){应该是if(lightchange == 3) {。使用=进行赋值，使用==进行相等性检查。

  3. 不能将函数用作数组索引：imgarray[fnnextimage]应为imgarray[lightchange - 1]（数组索引以零开头）。

总之，这应该有效：

var imgarray = [];
imgarray[0].src = "A452 Images/red traffic light.png";
imgarray[1].src = "A452 Images/yellow traffic light.png";
imgarray[2].src = "A452 Images/green traffic light.png";
// Changed: lightchange is now global
var lightchange = 1;
function fnnextimage() {
    lightchange = lightchange + 1;
    // Changed: compare to 3 instead of assigning 3
    if(lightchange == 3){
        lightchange = 1;
    }
    // Changed: Use correct array index
    document.getElementById('red').src = imgarray[lightchange - 1];
}

问题是var lightchange不是全局变量。要修复它，请执行以下操作：

var imgarray=[],lightchange = 1;
imgarray[0].src = "A452 Images/red traffic light.png";
imgarray[1].src = "A452 Images/yellow traffic light.png";
imgarray[2].src = "A452 Images/green traffic light.png";
function fnnextimage(){
    lightchange++;
    if(lightchange==3)
        lightchange=1;
    document.getElementById('red').src=imgarray[lightchange-1];
}

在fnnextimage函数中，lightchange首先设置为1，然后递增（到2）。每次执行该函数时，其值都相同。

（提示：当一个函数没有达到预期效果时，console.log(variableName)是在任何给定时间查看variableName中内容的快速方法。这是一种比在SO上提问更快的调试方法。）

当代码尝试比较if(lightchange=3)时，它实际上设置值，而不是评估的值。在条件句中使用==。

imgarray[fnnextimage]正在尝试使用不存在的变量fnnextimage访问索引——这是一个函数名，而不是变量名。

相关文章：