кнопка HTML не работает с моим JavaScript

Я создаю кнопку оперированных набор светофоров, у меня есть этот HTML и JAVASCRIPTкнопка HTML не работает с моим 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>

и огни на КАС листе, проблема, с которой я сталкиваюсь, заключается в том, что когда я запускаю код в браузере, кнопка ничего не делает, что я ошибаюсь?

источник

2016-11-09 Dan

новообращенного OnClick = "changestate" в OnClick = "changestate()" – Jobin

Проверьте это link: -https: //codedump.io/share/6BubpXSG1rX/1/traffic-light-with-button-and-array –

Вы пытаетесь вызвать функцию двумя разными способами: как встроенными, так и обработчиками событий.
Разметка недействительна, как с опечатками, так и с несколькими идентичными значениями id.
Обработчик события назначается перед тем, как элемент существует.

Удалить кнопку дубликата и встроенный onclick и включить JavaScript после элемента (ов):

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

источник

2016-11-09 15:12:57 David

Большое вам спасибо, теперь я вижу логику и отлично работает – Dan

удалить эту часть вашего HTML кода

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

изменить его к этому.

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

Я считаю, что ваши проблемы идут от не имея закрытия > на ввод данных, не имея() на вашем OnClick вызова &, имеющий два элемента с одинаковым идентификатором.

источник

2016-11-09 15:10:54

кнопка HTML не работает с моим JavaScript

ответ

Смежные вопросы