2016-11-09 71 views
1

我創建一個按鈕操作的設定紅綠燈, 我有這個HTML和JavaScriptHTML按鈕不是我的javascript工作

var lightStates = { 
 
    red: 0, 
 
    amber: 1, 
 
    green: 2 
 
}; 
 
var currentState = lightStates.red; 
 

 
document.getElementById('changeBtn').onclick = function() { 
 
    changeState(); 
 
}; 
 

 

 
function changeState() { 
 
    clear(); 
 
    switch (currentState) { 
 
    case lightStates.red: 
 
     { 
 
     document.getElementById("red").className = "light red"; 
 
     currentState = lightStates.amber; 
 
     } 
 
     break; 
 
    case lightStates.amber: 
 
     { 
 
     document.getElementById("amber").className = "light amber"; 
 
     currentState = lightStates.green; 
 
     } 
 
     break; 
 
    case lightStates.green: 
 
     { 
 
     document.getElementById("green").className = "light green"; 
 
     currentState = lightStates.red; 
 
     } 
 
     break; 
 
    } 
 
} 
 

 
function clear() { 
 
    document.getElementById("red").className = "light off"; 
 
    document.getElementById("amber").className = "light off"; 
 
    document.getElementById("green").className = "light off"; 
 
}
<html> 
 

 
<head> 
 
    <script type="text/javascript" src=javasript.js></script> 
 
</head> 
 
<link rel="stylesheet" href="style.css"> 
 
<div class="traffic-light"> 
 
    <div class="light off" id="red"></div> 
 
    <div class="light off" id="amber"></div> 
 
    <div class="light off" id="green"></div> 
 
</div> 
 
<button id="changeBtn">Change</button> 
 
<input type="button" id="changeBtn" onclick="changestate" </input> 
 

 
</html>

,並在CSS片燈, 我遇到的問題是,當我在瀏覽器中運行代碼時,該按鈕根本沒有做任何事情,我該怎麼辦?

+0

轉換的onclick = 「改變狀態」 來的onClick = 「改變狀態()」 – Jobin

+0

檢查這鏈接:-https://codedump.io/share/6BubpXSG1rX/1/traffic-light-with-button-and-array –

回答

1
  1. 您試圖以兩種不同的方式調用該函數,這兩種方式既可以是內聯函數,也可以是事件處理函數。
  2. 該標記無效,均爲錯別字,並具有多個相同的id值。
  3. 在元素實際存在之前分配事件處理程序。

刪除重複按鈕,內嵌onclick,包括JavaScript的元素(S):

<input type="button" id="changeBtn"></input> 
<script type="text/javascript" src="javasript.js"></script> 
+0

非常感謝你,我現在可以看到邏輯,它工作完美 – Dan

1

刪除的HTML代碼

<button id="changeBtn">Change</button> <input type="button" id="changeBtn" onclick="changestate"</input>

改成這樣這部分。

<button id="changeBtn" onclick="changestate()">Change</button>

我相信你的問題是從沒有對您輸入關閉>()上具有相同ID的兩個元素的onclick您的通話&來了,沒有。