Question

所以红色交通灯出现，然后当按下下一个灯按钮时，灯不会改变，我不能为我的生活找出原因。我将不胜感激任何帮助。这是代码：

<!DOCTYPE html>
<html>
  <body>

    <img id="thestartlight" src="file:\\\C:\Users\Sony\Desktop\Amul's USB\IT\it test\traffic-light-red.jpg">

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

    <script>
      var list = [
        "file:\\\C:\Users\Sony\Desktop\Amul's USB\IT\it test\traffic-light-red.jpg.html"
        "file:\\\C:\Users\Sony\Desktop\Amul's USB\IT\it test\traffic-light-amber.jpg",
        "file:\\\C:\Users\Sony\Desktop\Amul's USB\IT\it test\traffic-light-green.jpg",
        "file:\\\C:\Users\Sony\Desktop\Amul's USB\IT\it test\traffic-light-red.jpg"
      ];

      var index = 0;
      var lightsLen = lights.length;

      function nextLightClick() {
        index++;

        if (index == lightsLen) 
          index = 0;

        var image = document.getElementById('thestartlight');
        image.src = lights[index];
      }
    </script>
  </body>
</html>

Answer 1

有3个问题。

1）list必须是lights

2）最好将图像放到相对于您的代码文件夹的images/lights/文件夹中。

3）html文件无法在图片标签中显示

以下是修复：

var lights = [ 
   "images/lights/amber.jpg", 
   "images/lights/green.jpg", 
   "images/lights/red.jpg"
]; 
var index = 0; 
var lightsLen = lights.length;

Answer 2

这是一个错字..

 var list = [ ...

应该是

 var lights [ ...

Answer 3

您将数组命名为list，但您正在寻找lights中的图片。

您还需要从阵列中删除.html文件。

var image = document.getElementById('thestartlight');


var lights = [
"http://archive.nassaucountyny.gov/agencies/TPVA/Images/RedLight-2_145x193.jpg",
"http://www.clker.com/cliparts/2/1/1/6/N/W/amber-traffic-light.svg",
"http://www.clker.com/cliparts/6/e/9/d/11949849761176136192traffic_light_green_dan__01.svg"
];

var index = 0;
var lightsLen = lights.length;

function nextLightClick() {
   index++;

  if (index == lightsLen){ 
      index = 0;
  }

  image.src = lights[index];
}

img {width:50px;}

<img id="thestartlight" src="http://archive.nassaucountyny.gov/agencies/TPVA/Images/RedLight-2_145x193.jpg">

<button type="button" onclick="nextLightClick()">Next Light</button>

javascript和html流量灯不工作

3 个答案: