交通燈序列燈不會改變

我想創建一個使用html和JavaScript的交通燈模擬。我設法讓顯示的開始圖像，但按鈕只是不起作用。交通燈序列燈不會改變

2016-08-22 beenstuckonthiscodeforever

我認爲它沒有關係，因爲它是一個函數名稱 – beenstuckonthiscodeforever

對不起，我在看到你的回覆之前編輯了我以前的評論，但我沒有評論函數的名稱，我是間接的指出下面的答案是什麼意思。 – nnnnnn

HTML中id屬性的有效值不包含兩個單詞內的空格。有關詳細信息，請參閱此鏈接http://stackoverflow.com/questions/70579/what-are-valid-values-for-the-id-attribute-in-html。 –

只是借這個（你應該與Internet上運行此）

<html> 
<body> 

<p>Click the button to change to the next light.</p> 

<img id="starting_light" src="http://mars.wiwi.hu-berlin.de/mediawiki/sk/images/thumb/1/1f/Red_Light_Icon.svg/232px-Red_Light_Icon.svg.png"> 

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

<script> 

var lights = new Array("http://mars.wiwi.hu-berlin.de/mediawiki/sk/images/thumb/1/1f/Red_Light_Icon.svg/232px-Red_Light_Icon.svg.png","https://upload.wikimedia.org/wikipedia/commons/thumb/4/45/Yellow_Light_Icon.svg/232px-Yellow_Light_Icon.svg.png","https://upload.wikimedia.org/wikipedia/commons/4/4b/Green_Light_Icon.svg"); 



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

function nextLightClick() { 
    index++; 

    if (index == lightsLen) 
     index = 0; 

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

</body> 
</html>

來源

2016-08-22 12:49:56 Xiaoerge

看起來他也需要數組中的相對路徑？ – Timigen

它仍然沒有運作 – beenstuckonthiscodeforever

我試圖把文件夾鏈接，我認爲是在相對路徑中，但它沒有工作，所以我改回它 – beenstuckonthiscodeforever

不能使用starting light作爲ID，如評論Valid Naming for ID指出，你可以在這裏閱讀更多。

也改變index=到index++

也似乎有一個錯字，以及在nextLightClick()功能缺失的大括號。讓我知道如果這有幫助！

P.S確保所有的圖片命名正確，並在同一目錄！

來源

2016-08-22 12:59:10

使用'_'或' - '代替id（starting-light）中的空格。
如果所有的圖像都在./ict traffic lights/文件夾，然後改變陣列中的圖像的名稱是象"./ict traffic lights/red.jpg", "./ict traffic lights/redamber.jpg"等
後index = index ++;線原因移除額外支架否則代碼的 if (index == lightsLen)...部分保持nextLightClick()函數之外。

來源

2016-08-22 12:59:16

我試過圖像鏈接在數組中，它並沒有因爲某種原因有所作爲 – beenstuckonthiscodeforever

嘗試在您的文件夾名稱中使用而不是空間 –

哦，很抱歉，不是，而是％20 –

交通燈序列燈不會改變

回答

相關問題