代码报错Uncaught TypeError: toggleButton.addEventListener is not a function求解决

问题原因 #

document.getElementsByClassName() 返回的是HTMLCollection（类数组对象），包含所有匹配指定类名的元素，并非单个DOM元素。而addEventListener是单个DOM元素的专属方法，直接在这个集合上调用就会触发类型错误。

修复方案 #

有两种简单的解决方式：

方式1：从HTMLCollection中取第一个元素

和你获取navbarLinks的逻辑一致，在getElementsByClassName后添加[0]，提取集合中的第一个匹配元素：

var toggleButton = document.getElementsByClassName('toggle-button')[0]

var navbarLinks = document.getElementsByClassName('navigation')[0]

toggleButton.addEventListener('click', () => {
  navbarLinks.classList.toggle('active')
})

方式2：改用querySelector直接获取单个元素

querySelector会直接返回第一个匹配CSS选择器的元素，写法更简洁：

var toggleButton = document.querySelector('.toggle-button')

var navbarLinks = document.querySelector('.navigation')

toggleButton.addEventListener('click', () => {
  navbarLinks.classList.toggle('active')
})

额外建议 #

为了避免页面中不存在目标元素时触发新的错误，可以添加判断，确保元素存在后再绑定事件：

var toggleButton = document.querySelector('.toggle-button')
var navbarLinks = document.querySelector('.navigation')

if (toggleButton && navbarLinks) {
  toggleButton.addEventListener('click', () => {
    navbarLinks.classList.toggle('active')
  })
}

内容的提问来源于stack exchange，提问作者Amari Mahdi