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を変更するだけで済みます。他のウェブサイトやのCDNからホストされたこのスニペット画像で

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>

。また、画像のパスが間違っているように見えます。画像のパスを確認してください。

出典

2016-11-10 19:48:39 oguzhancerit

ブラウザのアドレスバーに「H：\ IT \ traffic-light-red.jpg」と入力すると動作しますか？いいえ！それがファイルシステム上のイメージにアクセスしようとしているからです。 file protocolを使用する必要があります。ファイルはあなたがまた、これらのリンクをつかむことができ、それがうまくいくのDropboxのようなWeb上のどこかにホストされた場合

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

：だからそれはようなものになるだろう。

出典

2016-11-10 19:54:42

画像のソースは、プロジェクトディレクトリのルートにHTMLファイルへの近くにあなたのイメージ間違った場所で、その後、あなたのソースに、このようなものを使用する：あなたのimg要素の<img src="image_url" />

あなたの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配列のトラフィックライト

答えて

関連する問題