почему некоторые переменные не являются определяющими?

Question

Я чувствую себя плохо знакомым с javascript, спрашивающим об этом, и я абсолютно озадачен здесь. Понятия не имею почему и пытаюсь выяснить много-много часов, но если, например, у меня есть такая строка в моем скрипте:

var listen = document.getElementsByClassName('test_this')[0];

На моем локальном компьютере, когда я набираю 'listen' в консоли, он возвращает неопределенное значение, но если я ввожу это вручную в консоль, тогда это работает. Например:

HTML:

<p class='test_this'>hi</p>

JS:

var listen = document.getElementsByClassName('test_this')[0];

listen.addEventListener("click", function onclick(event) {
  alert('hi');
});

function testZis() {
  alert('test worked');
}
alert('saysHiAnyway');

URL кодепа: https://codepen.io/anon/pen/pqZNVR

Если я загружаю URL-адрес codePen, я получаю правильное предупреждение, но на своем локальном компьютере в браузере я просто получаю эту ошибку: Cannot read property 'addEventListener' of undefined и никакого предупреждения - предположительно, потому что по неизвестной причине объявление var listen линия не работает.

Может кто-нибудь объяснить, что здесь происходит? Я был бы очень благодарен. У меня такое ощущение, что это что-то невероятно простое, но, кажется, его так сложно идентифицировать. Спасибо за любую помощь.

Answer 1

У вас есть несколько вариантов, чтобы исправить это:

Поместите теги <script> ниже всего своего HTML-кода, прямо над закрывающим тегом </body>.

В качестве альтернативы можно заключить весь код в обработчик событий window.onload следующим образом:

window.onload = function() {
    //All of your code goes here
}