这段代码是在图片(红绿灯)之间切换,然后重新开始。第一个图像运行良好,但其他图像不会出现。
<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>
您的代码包含三个错误:
-
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(){
-
if(lightchange=3){
应该是if(lightchange == 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
访问索引——这是一个函数名,而不是变量名。