JavaScript數組紅綠燈

-1

<!DOCTYPE html> 
 
<html> 
 
<body> 
 

 
<img id="H:\IT\traffic-light-red.jpg" src="H:\IT\traffic-light-red.jpg"> 
 

 
<button type="button" onclick="changeLights()">Change Lights</button> 
 

 
<script> 
 
var list = [ 
 
    "H:\IT\traffic-light-red.jpg", 
 
    "H:\IT\traffic-light-red-amber.jpg", 
 
    "H:\IT\traffic-light-green.jpg", 
 
    "H:\IT\traffic-light-red.jpg" 
 
]; 
 

 
var index = 0; 
 

 
function changeLights() { 
 
    index = index + 1; 
 

 
    if (index == list.length) index = 0; 
 

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

 
</body> 
 
</html>

我不明白爲什麼代碼不能正常工作。每次我嘗試在瀏覽器中打開它時，它都不會顯示圖像。這是我在學校努力做的事情，並希望有人能指引我朝着正確的方向發展。

來源

2016-11-10 devjyot kainda

你的圖像是在文件系統？瀏覽器無法訪問您的文件系統列表。先把它們放在http服務器上。其次，你的圖像ID和getElementById不匹配......祝你好運！ – spooky

你沒有帶''light''的'id'的元素。 –

你不能正確選擇你的形象。

所有你需要的是改變你的IMG元素的ID;

var list = [ 
 
    "https://cdn0.iconfinder.com/data/icons/customicondesign-office6-shadow/256/trafficlight-red.png", 
 
    "https://pixabay.com/static/uploads/photo/2012/05/07/04/43/button-47963_640.png", 
 
    "https://cdn0.iconfinder.com/data/icons/customicondesign-office6-shadow/128/trafficlight-green.png" 
 
]; 
 

 
var index = 0; 
 

 
function changeLights() { 
 
    index = index + 1; 
 

 
    if (index == list.length) index = 0; 
 

 
    var image = document.getElementById('light'); 
 
    image.src=list[index]; 
 
}

<img id="light" src="https://cdn0.iconfinder.com/data/icons/customicondesign-office6-shadow/256/trafficlight-red.png" width="100" height="100"> 
 
<button type="button" onclick="changeLights()">Change Lights</button>

從其他網站或託管的CDN這個片段的圖像。此外，你的圖像路徑看起來是錯誤的。請檢查您的圖像路徑。

來源

2016-11-10 19:48:39 oguzhancerit

如果您在瀏覽器的地址欄中輸入「H：\ IT \ traffic-light-red.jpg」，它會起作用嗎？不！導致它試圖訪問文件系統上的圖像。您需要使用file protocol。因此，這將是這樣的：

<!DOCTYPE html> 
<html> 
<body> 

<img id="H:\IT\traffic-light-red.jpg" src="H:\IT\traffic-light-red.jpg"> 

<button type="button" onclick="changeLights()">Change Lights</button> 

<script> 
var list = [ 
    "file:///H:/IT/traffic-light-red.jpg.html" 
    "file:///H:/IT/traffic-light-red-amber.jpg", 
    "file:///H:/IT/traffic-light-green.jpg", 
    "file:///H:/IT/traffic-light-red.jpg" 
]; 

var index = 0; 

function changeLights() { 
    index = index + 1; 

    if (index == list.length) index = 0; 

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

</body> 
</html>

如果文件是網絡狀的Dropbox，你也可以抓住這些鏈接，它會工作的地方舉辦。

來源

2016-11-10 19:54:42

圖片的來源是不正確的地方你的圖像接近你的HTML文件在項目目錄的根目錄，然後使用類似這樣您來源：<img src="image_url" />

您的IMG元素的ID不匹配的getElementById方法

來源

2016-11-10 19:57:39 farhadamjady

這是我用過的，希望它有幫助！

<html> 
 
<head> 
 
<b> <u> <i>Traffic Light System</i> </u> </b> 
 
</head> 
 
<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-11-15 14:53:20 adambunce123

JavaScript數組紅綠燈

回答

相關問題