Javascript：未捕获的类型错误：无法读取未定义的属性“addEventListener”[重复]答案

【问题标题】：Javascript: Uncaught TypeError: Cannot read property 'addEventListener' of undefined [duplicate]Javascript：未捕获的类型错误：无法读取未定义的属性“addEventListener”[重复]
【发布时间】：2020-04-06 10:17:00
【问题描述】：

我的 javascript 代码出错。这是在我的网页中打开汉堡菜单。错误信息：未捕获的类型错误：无法读取未定义的属性“addEventListener” 在 script.js:4

const toggleButton = document.getElementsByClassName("toggle-button")[0]
const navbarLinks = document.getElementsByClassName("navbar-links")[0]

toggleButton.addEventListener("click", function() {
  navbarLinks.classList.toggle("active")
})

怎么了？

【问题讨论】：

您的类名查询未返回任何元素。 什么时候这个脚本运行？它是在您文档的<head> 中还是其他地方？
document.getElementsByClassName("toggle-button")[0] 未定义。您确定在运行此脚本时 DOM 中有一个类为 toggle-button 的元素吗？
仅供参考，const toggleButton = querySelector('.toggle-button') 更短

标签： javascript undefined typeerror addeventlistener

【解决方案1】：

无法读取未定义的属性“addEventListener”

这意味着toggleButton 是undefined，所以最可能的问题是document.getElementsByClassName("toggle-button") 运行时，没有匹配的元素。

【讨论】：

查看链接的重复问题；如果您在该 HTML 之前的代码块中运行 JavaScript，则不会找到这些元素，因为它们尚未在页面中。
啊，好的，非常感谢！