JS绑定汉堡菜单点击事件报Uncaught TypeError (reading 'toggle') 如何解决

报错根因 #

报错Cannot read properties of undefined (reading 'toggle')表示你调用toggle方法的对象是未定义的，结合你给出的代码和报错指向navbar行的信息，有两类常见触发原因：

• navbar变量未成功获取到对应DOM元素：可能是元素选择器拼写不匹配、JS代码执行时页面DOM还未完成渲染（比如JS代码放在<head>标签内且没有监听DOM加载完成事件），导致navbar最终取值为null或undefined，无法读取其下的属性方法。
• 类操作属性拼写错误：你代码中使用的classlist为错误写法，DOM元素内置的类操作属性正确拼写为classList（第二个单词首字母大写），拼写错误会导致属性返回undefined，调用toggle方法就会触发报错。

排查步骤 #

• 验证DOM元素获取是否正常：在点击事件回调的第一行添加console.log(navbar)，触发点击后查看控制台输出，如果输出为null或undefined，先核对选择器是否和HTML中navbar元素的id、类名完全匹配，再调整JS代码加载逻辑：要么把JS代码放到<body>标签的末尾，要么把所有DOM操作逻辑包裹在DOMContentLoaded事件回调中，确保DOM渲染完成后再执行元素获取逻辑。
• 核对属性拼写：把所有classlist替换为正确的classList。

修复后代码示例 #

// 示例选择器可根据你的实际HTML结构调整
const burger = document.querySelector('.burger')
const rightNav = document.querySelector('.right-nav')
const navbar = document.querySelector('.navbar')
const navList = document.querySelector('.nav-list')

burger.addEventListener('click', () => {
  rightNav.classList.toggle('v-class-resp')
  navbar.classList.toggle('h-nav-resp')
  navList.classList.toggle('v-class-resp')
})

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