JavaScript和html交通燈不工作

所以紅色交通燈出現，然後當按下下一個燈光按鈕時燈光不會改變，我不能爲我的生活找出原因。我將不勝感激任何幫助。這裏的代碼：JavaScript和html交通燈不工作

<!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>

來源

2016-11-30 devjyot kainda

拼寫。 'var list'！='lights' – BenG

你的意思是'list.length'嗎？而不是'lights.length'或它總是0，就像本剛剛說的:) –

你也有語法錯誤，看看你的控制檯有錯誤 –

有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;

來源

2016-11-30 20:30:32 num8er

這是一個錯字..

var list = [ ...

應該

var lights [ ...

來源

2016-11-30 20:30:56

您將數組命名爲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>

來源

2016-11-30 20:31:47

JavaScript和html交通燈不工作

回答

相關問題