プログラムが機能せず、なぜわからない

-3

ウェブページ上にボタンと色の付いた円を表示するスクリプトを作成しています。このボタンを押すと、円の色を変更するはずです。私はボタンを押すたびに、それらが順番に変更する必要がありますので、ループされることになっている3色があります。プログラムが機能せず、なぜわからない

私のコードを実行すると、タグを作成するときに選択した色付きの円が表示され、ボタンを押すと変更されません。

はここに私のコードです：

<!doctype html> 
<html> 
<head> 
    <title>Traffic Lights</title> 
</head> 
<body> 
    <img id="trafficimg" src="green.jpg" alt="Change Now!"> 
    <button type="button" onClick="changelight()"> Change the Lights! </button> 
    <script> 
     var assets = ["red.jpg","yellow.jpg","green.jpg"] 
     var state = 1 
     var colour = ""     
     function changelight() { 
     if state == 1{ 
      var colour = "green"; 
     if state == 2{ 
      var colour = "orange"; 
     if state == 3{ 
      var colour = "red"; 
     }         
     if colour.includes("green"){ 
     document.getElementById("trafficimg").setAttribute('src', assets[0]); 
     state=state+1; 
     if colour.includes("green"){ 
      document.getElementById("trafficimg").setAttribute('src', assets[1]); 
      state=state+1; 
      if colour.includes("green"){ 
       document.getElementById("trafficimg").setAttribute('src', assets[2]); 
       state=state - 2; 
      } 
     } 
     }  
    </script> 
</body> 
</html>

私は、可能な場合、あまりにも多くのコードを変更しないシンプルなソリューションを取得するために役立つだろう、しかし、任意のヘルプははるかに高く評価されます。皆さん、ありがとうございました。

出典

2017-02-17 PIE

コンソール上の任意のエラーを見ていますか？もし状態== 1の場合は、これを小文字で囲んでください – avck

誰かがすでにこの質問に答えていますが、将来参照するためにJSコードが動作していないときは、 F12を押します）。これにより、プログラムに構文エラーがあるという大きな赤いエラーメッセージが表示されます。 –

ああ、そうです。私はそれを知らなかった。私はJSに非常に新しいです – PIE

あなたは画像配列のインデックスとしての状態で例の作業カッコ

if (state == 1) { 
//^  ^
    colour = "green"; 
    // no need to redeclare color 
} 
// missing curly bracket at the end of if statement

で条件をラップする必要があります。

var assets = ["https://dummyimage.com/50x50/F00/000000&text=+", "https://dummyimage.com/50x50/FF0/000000&text=+", "https://dummyimage.com/50x50/0F0/000000&text=+"], 
 
    state = 0; 
 

 
function changelight() { 
 
    state++;    // increment state 
 
    state %= assets.length; // remainder operator for keeping state in range of array 
 
    document.getElementById("trafficimg").setAttribute('src', assets[state]); 
 
}

<img id="trafficimg" src="https://dummyimage.com/50x50/F00/000000&text=+" alt="Change Now!"><br> 
 
<button type="button" onClick="changelight()"> Change the Lights! </button>

出典

2017-02-17 10:47:28

私はこれを変更しました、あなたに助けてくれてありがとう。私はJS/HTMLを初めて使っていますので、いくつか忘れてしまいます。しかし、この解決方法では問題は完全に解決されませんでした。 – PIE

こんにちは、あなたの短い抜粋で複数のエラー（実際には、多くの）エラーがあります。ところで、私はあなたがこの作りたかったと思う：

var state = 1; 
 
var colour = "green"; 
 

 
function changelight(state) { 
 

 
    if (state == 1){color = "green";} 
 
    if (state == 2){color = "orange";} 
 
    if (state == 3){color = "red";} 
 

 

 
    switch(color){ 
 
     case 'green': {document.getElementById("para1").style.background = 'green'; break;} 
 
     case 'orange': {document.getElementById("para1").style.background = 'orange'; break;} 
 
     case 'red':{document.getElementById("para1").style.background = 'red'; break;} 
 
    } 
 

 
}

<p id="para1" style="background:green;width:50px;height:50px;border-radius:50%;"></p> 
 
<button type="button" onClick="changelight(1)"> green</button> 
 
<button type="button" onClick="changelight(2)"> orange</button> 
 
<button type="button" onClick="changelight(3)"> red</button>

出典

2017-02-17 11:15:59 Deadpool

ああ、ありがとう。唯一の問題は、私は3つの色の間で切り替える1つのボタンが必要だということです。 – PIE

こんにちは、これは親愛なる助けと答えて受け入れるpls。 – Deadpool

プログラムが機能せず、なぜわからない

答えて

関連する問題