移动端响应式导航点击菜单报错：addEventListener非函数/元素为null

第一个报错：Uncaught TypeError: navLink.addEventListener is not a function #

document.getElementsByClassName("menu-item")返回的是HTMLCollection（类数组的元素集合），不是单个DOM元素。你直接给这个集合调用addEventListener会报错，因为这个方法是单个DOM元素的专属方法，集合本身没有这个方法。必须遍历集合里的每个元素，逐个绑定点击事件。

第二个报错：Uncaught TypeError: navLink is null #

document.querySelector(".menu-item a")只会返回匹配该选择器的第一个元素，如果页面中不存在符合条件的元素，或者你的JS代码在DOM还没完全加载完成时就执行了（此时目标元素还没被渲染到页面中），这个方法就会返回null。给null调用addEventListener自然会触发这个类型错误。

简单修正方向 #

• 处理第一个问题：遍历HTMLCollection绑定事件，示例代码：

const navItems = document.getElementsByClassName("menu-item");
for (const item of navItems) {
  item.addEventListener('click', () => {
    // 这里写导航收起的逻辑
  });
}

• 处理第二个问题：要么把JS代码放到</body>标签前（确保DOM渲染完成后再执行），或者监听DOMContentLoaded事件再执行代码；如果要绑定所有.menu-item a元素，改用document.querySelectorAll(".menu-item a")获取元素集合后遍历绑定。

内容的提问来源于stack exchange，提问作者CF Walker