Question

这是我目前正在使用的代码：我需要显示一个起始图像（最好是绿色）然后，每次单击该按钮时，图像需要更改为trafficlight，然后更改为另一个图像。从头开始。例如，它需要从绿色变为橙色，然后变为红色，然后变回橙色等。

    <!DOCTYPE html/>
    <html>
    <script type="text/javascript">
    var trafficlight = [];
    trafficlight [0] = " http://4vector.com/i/free-vector-traffic-light-green-    clip-art_117820_Traffic_Light_Green_clip_art_medium.png ";
    trafficlight [1] =  "http://www.clker.com/cliparts/8/1/7/4/11949849782053089133traffic_light_yellow_ dan_01.svg.med.png ";
    trafficlight [2] = "http://www.clker.com/cliparts/1/f/a/2/11949849771043985234traffic_light_red_dan_ge_01.svg.med.png ";

    var num = 0;

    function changepic()
    {

      if (num>=trafficlight.length-1){
         num=0;
      }
      num=num+1;
      document.trafficlight.src=trafficlight[num];
    }

    </script>
    </head>

   <body>
   <center>
   <img src ="http://4vector.com/i/free-vector-traffic-light-green-clip- art_117820_Traffic_Light_Green_clip_art_medium.png" name="trafficlightpic"  width="400" height="400" />
   <p><A href="javascript:changepic();">click here</A></p>
   </center>
   </body>
   </html>

Answer 1

document.trafficlight不存在。你需要：

 document.getElementById("trafficlightpic").src=trafficlight[num];

代替。您应该在name=""元素中将id=""更改为img。这应该有用。

Answer 2

如Jonas W所述 - 您试图引用图像，但使用了错误的引用。您可以通过ID或使用您的名称来完成。请注意，如果您正在使用该名称，那么您需要使用[0]引用它，就像我在帖子中一样 - 这是因为按名称获取元素将返回一个类似对象的数组 - 所以您需要指定它这是第一项。你的橙色灯的图像src也被打破了。下面的工作并允许交换src（除了黄色光图像不显示）。

＆＃13;

var trafficlight = ["http://4vector.com/i/free-vector-traffic-light-green-clip-art_117820_Traffic_Light_Green_clip_art_medium.png","http://www.clker.com/cliparts/8/1/7/4/11949849782053089133traffic_light_yellow_dan_01.svg.med.png","http://www.clker.com/cliparts/1/f/a/2/11949849771043985234traffic_light_red_dan_ge_01.svg.med.png"];

function changepic()
{
  var imageSrc=document.getElementsByName('trafficlightpic')[0].src;
  var num =trafficlight.indexOf(imageSrc);
   if (num >= trafficlight.length-1){num=-1;}
   num+=1;
  document.getElementsByName('trafficlightpic')[0].src=trafficlight[num];
}

＆＃13;

 <center>
   <img src ="http://4vector.com/i/free-vector-traffic-light-green-clip- art_117820_Traffic_Light_Green_clip_art_medium.png" name="trafficlightpic"  width="400" height="400" />
    <p onclick="changepic();">click here</p>
   </center>

＆＃13;

我需要有关此JavaScript图像显示代码的帮助

2 个答案: