2017-01-09 9 views
1

私はこれらの画像を変更しようとしています。配列にリンクを格納する必要がありますが、ボタンを押してイメージを変更すると、配列変数がイメージにリンクすることが認識されません。誰か助けてもらえますか?ここに私の現在のコードです:あなたは、文字列にsrc属性を設定している。この場合画像へのリンクを保持し、画像ソースで使用するためにJavaScript配列が必要です

<!DOCTYPE html> 
<html> 
<head> 
    <script> 

    var red = "https://s23.postimg.org/bo5a8hzsr/red_jpg.png" 
    var yellow = "https://s23.postimg.org/bo5a8hzsr/red_jpg.png" 
    var green = "https://s29.postimg.org/5ljr1ha3r/green.png" 
    var lights=["red","yellow","green"] 


    function changered() 
    { 
     var img = document.getElementById("light"); 
     img.src="lights[0]"; 
     return false; 
    } 

    function changeyellow() 
    { 
     var img = document.getElementById("light"); 
     img.src="lights[1]"; 
     return false; 
    } 

    function changegreen() 
    { 
     var img = document.getElementById("light"); 
     img.src="lights[2]"; 
     return false; 
    } 

    </script> 

</head> 
<body> 
    <button id="red" onclick="setTimeout(changeyellow, 3000),setTimeout(changered, 6000),setTimeout(changegreen, 12000)">automatic</button> 
    <button id="red" onclick="changered();">red</button> 
    <button id="yellow" onclick="changeyellow();">yellow</button> 
    <button id="green" onclick="changegreen();">green</button> 
    <img id="light" src="https://s29.postimg.org/5ljr1ha3r/green.png" /> 
    <br><br><br> 

</body> 
</html> 
+3

、あなただけの配列を使用する必要があります。 – Cruiser

+2

言い換えれば 'lights = [red、yellow、green]'と 'img.src = lights [0];'など – j08691

答えて

4

「が点灯[0]」と0

代わりの位置での配列でない値これは:

var img = document.getElementById("light"); 
     //vvvvvvvvv 
img.src="lights[0]"; 
return false; 

あなたの配列の値を参照する必要があります。したがって、次のようになります。

img.src = lights[0]; 

各関数呼び出しでこれを行う必要があります。また、配列を初期化するときにも同じことをする必要があります。なるための

var lights = ["red","yellow","green"] 

ニーズ:

var lights = [red, yellow, green] 
+0

大変助けてくれてありがとう –

1

ここにあなたの主な問題は、あなたが書く場合は、配列内の例えば間違った変数を、使用していることである。

lights = ["red","yellow","green"]; 

あなたの配列値は、それぞれの値が"red","yellow"、および"green"の静的な文字列になります。

あなたはそれを変更する必要があります。だからあなたの配列は、URLを開催します

lights = [red,yellow,green]; 

同じことが、あなたの実際のコードでもsrc、と行く:

img.src="lights[0]"; 

あなただけsrcに静的な文字列を設定しています。それを変更します。

img.src= lights[0]; 
0

配列要素とlights[0]から""を削除してください。ここで が変更されたコードです:あなたは文字列にsrc属性を設定している

var lights=[red,yellow,green];  

function changered() 
{ 
    var img = document.getElementById("light"); 
    img.src=lights[0]; 
    return false; 
} 

function changeyellow() 
{ 
    var img = document.getElementById("light"); 
    img.src=lights[1]; 
    return false; 
} 

function changegreen() 
{ 
    var img = document.getElementById("light"); 
    img.src=lights[2]; 
    return false; 
} 
関連する問題