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

【问题标题】：why are some variables not defining?为什么有些变量没有定义？
【发布时间】：2019-06-03 17:18:28
【问题描述】：

我对 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 网址：https://codepen.io/anon/pen/pqZNVR

如果我加载 codePen URL，我会收到正确的警报，但在我的本地计算机上的浏览器中，我只会收到此错误：Cannot read property 'addEventListener' of undefined 并且没有警报 - 可能是因为出于某种未知原因，var listen 声明线路不工作。

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

【问题讨论】：

Why does jQuery or a DOM method such as getElementById not find the element?的可能重复
另外，谷歌搜索错误信息会导致here
脚本在结束 head 标签之前加载 - 是否过早加载？
是的，因为它会立即运行，而此时该元素还不存在。
将您的脚本标签/代码放在页面的结束正文标签的正上方。如果您愿意，您也可以使用 defer(developer.mozilla.org/en-US/docs/Web/HTML/Element/script) 属性来阻止它运行，直到页面加载完成。注意：如果您使用defer，则必须加载脚本，而不是内联。

标签： javascript jquery html function

【解决方案1】：

你有几个选项可以解决这个问题：

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

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

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

【讨论】：