Нуль при захвате элемента с .getElementById

Я пытаюсь захватить элемент (кнопку) и добавить на него прослушиватель событий. Всякий раз, когда я бегуНуль при захвате элемента с .getElementById

var button = document.getElementById('clickMe'); 
console.log(button); // null

Я проверил, что мой Javascript файл загружается и проверяется, что все чувствительно к регистру. Вот мой HTML и JS файлы:

HTML:

<!doctype html> 
<html> 
    <head> 
    <script src="js/timer.js"></script> 
    </head> 
    <body> 
     <button id='clickMe' type='button'>Hello</button> 
    </body> 
</html>

var button = document.getElementById('clickMe'); 
console.log(button); 
function buttonClicked() { 
    alert('the button was clicked'); 
} 

button.addEventListener('click', buttonClicked); 

function timerComplete() { 
    alert('timer complete'); 
} 

setTimeout(timerComplete, 2000);

Наиболее распространенные ошибки, которые я нашел был верблюжья getelementbyid корпуса, который я сделал.

Кто-нибудь знает, почему я продолжаю получать нуль? Он пытается захватить элемент до его загрузки?

источник

2014-02-21 HelloWorld

Ваш сценарий выполняется перед DOM загружен, поэтому элемент не существует в первую очередь должны быть направлены на ваш скрипт. Загрузите скрипт в конце документа или используйте document.onload, чтобы DOM загрузился при выполнении скрипта. – Arbel

Да, он пытается получить элемент до его загрузки. Взгляните на [window.onload] (https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers.onload) – acbabis

Ваш Javascript-код выполняется до того, как кнопка добавлена в DOM. Вы можете изменить HTML к этому:

<!doctype html> 
<html> 
    <body> 
     <button id='clickMe' type='button'>Hello</button> 
     <script src="js/timer.js"></script> 
    </body> 
</html>

Или еще лучше, если вы не возражаете, что делает ваш JS код немного сложнее, вы можете ждать ваших Dóm элементов, которые будут загружены перед выполнением этой части кода :

document.addEventListener('DOMContentLoaded', function() { 
    var button = document.getElementById('clickMe'); 
    console.log(button); 
});

Если вы используете этот JS вы можете положить обратно свой сценарий тег обратно в голову

источник

2014-02-21 21:11:26

Это, даже если оно работает, выглядит совершенно неправильно для меня. Код из вопроса с нетерпением ждет получения '$ (document) .ready()' ... – htatche

, это быстрое решение. Конечно, лучший подход - ждать, пока дом будет готов. Но если нет JQuery, это усложняет реализацию для начинающего разработчика –

Спасибо, ребята, да, я просто пытался получить некоторую практику с обратными вызовами. Глупая ошибка, чтобы я не видел этого раньше. Спасибо за исправление @emilioicai – HelloWorld

Нуль при захвате элемента с .getElementById

ответ

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