程序不起作用，我不知道爲什麼

-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代碼不工作，你的第一個端口應該是你的Web瀏覽器中的開發者控制檯（按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

啊，謝謝。唯一的問題是，我只需要1個按鈕，在3種顏色之間切換 – PIE

嗨，如果這對寶寶有幫助，請接受答案。 – Deadpool

程序不起作用，我不知道爲什麼

回答

相關問題