Предупреждение Javascript не работает над нажатием кнопки

Я набрал javascript так же, как и у вас, но на отдельный файл, связанный через файл HTML. Кнопка появляется, однако я не получаю предупреждения, когда нажимаю. Мой код выглядит следующим образом:Предупреждение Javascript не работает над нажатием кнопки

Javascript (index.js):

document.getElementById("myButton").onclick = function() { 
    alert("Hi"); 
}

HTML:

<!DOCTYPE html> 
<html> 
<head> 
<title>Javascript is Fun!(When it works)</title> 
<script type="text/javascript" src="index.js"></script> 
</head> 
<body> 
<button id="myButton">Click</button> 
</body> 
</html>

Любой знает, почему моя кнопка не работает? Мне кажется, что весь мой код в порядке, если я ничего не замечаю.

источник

2015-04-03 John

Ваш код выполняется до элемента, который он ссылается на существующий на странице. Переместите JavaScript в конец документа или заверните его в функцию window.onload.

window.onload = function() { 
    document.getElementById("myButton").onclick = function() { 
     alert("Hi"); 
    } 
}

jsFiddle example

источник

2015-04-03 00:32:18 j08691

Вы должны ждать документа, который будет построен, прежде чем вы можете ссылаться на элементы в нем.

Поместите свой сценарий в body, незадолго до конца. Это обеспечит, чтобы документ находился там, где выполняется скрипт.

Или, вы можете обернуть ваши JS в качестве слушателя нагрузки, как этот

window.addEventListener("load", function(){ 
    //...your stuff here 
})

источник

2015-04-03 00:32:24

Есть свой голос за принятие проще коды, чтобы сосуществовать с. ('addEventListener' добавляет прослушиватель событий поверх всех ранее установленных, тогда как' .onload' отменяет любое ранее установленное событие 'onload'.). Вот что я имею в виду: http://jsfiddle.net/v6ao73ap/ – blex

Спасибо @blex! Определенно гораздо более устойчивый подход к обработке событий! –

Вы не должны ставить <script type="text/javascript" src="index.js"></script> перед тем <body></body>, потому что, когда браузер пытается зарегистрировать событие, <button> не загружен уже. Поэтому, когда вы посмотрите на панель управления, вы получите что-то вроде TypeError: document.getElementById(...) is null.

Права версии может быть

<!DOCTYPE html> 
<html> 
<head> 
<title>Javascript is Fun!(When it works)</title> 
</head> 
<body> 
<button id="myButton">Click</button> 
</body> 
<script type="text/javascript" src="index.js"></script> 
</html>

источник

2015-04-03 00:33:36 Chazeon

Иногда вы должны поставить script код ниже button

<button id="myButton">Click</button> 

document.getElementById("myButton").onclick = function() { 
    alert("Hi"); 
}

источник

2015-08-20 09:11:27 Elyor

Предупреждение Javascript не работает над нажатием кнопки

ответ

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