程序不起作用，我不知道为什么

-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

程序不起作用，我不知道为什么

回答

相关问题