我无法让我的红绿灯序列在 html 中工作

Question

在我的 a452 计算 class 中，我试图用按钮更改图像以表示我的交通灯序列。

我可以显示我的第一张图片，但图片不会改变。在我的序列中，我有红绿灯的图片，但无法显示。

当我运行它加载了第一张图片，但随后它不会加载任何其他图片

在我的 a452 计算中，我试图用一个按钮更改图像以表示我的交通灯序列。我可以显示我的第一张图片，但图片不会改变，请帮忙。这是我的代码：

<!DOCTYPE html> 
<html> 
    <body> 
       <script> 
         var TLassets = ["Red.png","Redamber.png","Green.png","Amber.png"] 
         var count=0 
         function TL(){
          if(count<3){
            count=count+1
            document.getElemenybyId('lights').src=TLassets[count]; 
          }else{ 
            count=0 
            document.getElemenybyId('lights').src=TLassets[count]; 
          } 
        </script> 
        <center>
          <img id="lights" src='Red.png' ;>
        </center> 
        <center>
          <input type="button" id="change" value="change lights" onclick=TL()>
        </center> 
    </body>
</html>

Answer 1

您的代码中存在语法错误，请检查控制台！修复它们后，脚本将运行：getElemenybyId 不正确。

Answer 2

区分大小写的问题：document.getElementById('lights'); （注意粗体字母，大写 'b'）。

如果您是新手，我建议您在 "steps" 中拆分您的代码。我做了一些修改，检查一下，它对我有用。我添加了控制台打印来澄清。

    <script>
    var count = 0;
    function TL() {
      var TLassets = ["Red.png", "yellow.png", "Green.png"];
      count++
        if (count < 3) {
          console.log(count);
          console.log(TLassets[count])
          var edit_picture =  document.getElementById('lights');
          edit_picture.src = TLassets[count];
        } else {
          count = 0;
          console.log(count);
          console.log(TLassets[count])
          var edit_picture =  document.getElementById('lights');
          edit_picture.src = TLassets[count];
        }
      }
    </script>

我无法让我的红绿灯序列在 html 中工作

I cannot get my traffic light sequence to work in html

javascript

html

arrays

traffic