HTML-Taste funktioniert nicht mit meinem Javascript

ich eine Taste erschaffe betrieben Ampel, Ich habe dieses HTML und JavaScriptHTML-Taste funktioniert nicht mit meinem 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>

und die Lichter auf einem CSS-Blatt, Das Problem, das ich habe ist, dass, wenn ich den Code in einem Browser ausführen, der Button überhaupt nichts tut, was mache ich falsch?

Quelle

2016-11-09 Dan

convert Onclick = "Change" zu onClick = "Change()" – Jobin

prüfen diese Link: -https: //codedump.io/share/6BubpXSG1rX/1/traffic-light-with-button-and-array –

Sie versuchen, die Funktion auf zwei verschiedene Arten aufzurufen, sowohl inline als auch als Event-Handler.
Das Markup ist ungültig, sowohl mit Tippfehlern als auch mit mehreren identischen id Werten.
Der Ereignishandler wird zugewiesen, bevor das Element tatsächlich existiert.

Entfernen Sie den doppelten Knopf und die Inline-onclick und umfassen die JavaScript nach dem Element (e):

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

Quelle

2016-11-09 15:12:57 David

Vielen Dank, ich kann die Logik jetzt sehen und es funktioniert perfekt – Dan

Entfernen dieser Teil Ihres HTML-Code

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

ändern es dazu.

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

Ich glaube, Ihre Probleme aus keinem abschließenden mit > auf Ihrem Eingang kommen, nicht() auf Ihrem Onclick Anruf mit & mit zwei Elementen mit derselben ID.

Quelle

2016-11-09 15:10:54

HTML-Taste funktioniert nicht mit meinem Javascript

Antwort

Verwandte Themen