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

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

Codepen 网址:https://codepen.io/anon/pen/pqZNVR

如果我加载 codePen URL，我会收到正确的警报，但在我的本地计算机上的浏览器中，我只会收到此错误:无法读取未定义的属性“addEventListener” 并且没有警报 -大概是因为，由于某种未知的原因， var Listen 声明行不起作用。

有人可以解释一下这里到底发生了什么吗？我将非常感激。我有一种感觉，这件事非常简单，但又似乎很难识别。感谢您的帮助。

Answer 1

您有几个选项可以解决此问题:

放置您的 <script>所有 HTML 代码下方的标签，结束符 </body> 的正上方标签。

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

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