为什么有些变量没有定义？

Question

我觉得javascript问这个新手，我绝对难过。不知道为什么并试图找出很多小时，但是，例如，如果我在我的脚本中有这一行：

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

在我的本地机器上，当我在控制台中输入'listen'时，它会返回undefined，但如果我手动将其输入控制台，那么它就可以了。例如：

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');

Codepen URL：https://codepen.io/anon/pen/pqZNVR

如果我加载codePen URL，我得到正确的警报，但在我的浏览器的本地机器上，我只是得到这个错误：Cannot read property 'addEventListener' of undefined并没有警报 - 大概是因为，由于某些未知的原因，var listen声明行无效。

有人能解释一下这里到底发生了什么吗？我真的很感激。我觉得它有一种令人难以置信的简单，但它似乎很难识别。谢谢你的帮助。

Answer 1

你有几个选择来解决这个问题：

将<script>标记放在所有HTML代码下方，就在最后的</body>标记上方。

另一种方法是将所有代码包装在window.onload事件处理程序中，如下所示：

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