JS运行报Uncaught TypeError: Cannot read property 'add' of undefined如何解决

错误原因 #

你碰到的报错：

Uncaught TypeError: Cannot read property 'add' of undefined at HTMLAnchorElement.linkAction

核心问题是API拼写错误：DOM元素操作类名的原生属性正确写法是classList（第二个单词首字母L大写），你的代码里写的是全小写的classlist，这个属性不存在于DOM元素上，读取后返回undefined，调用undefined的add方法就会抛出该类型错误。

修复方法 #

仅需要把this.classlist.add('active')这行里的classlist修改为classList即可，修改后的完整代码如下：

const navLink = document.querySelectorAll('.nav__link')

function linkAction(){
    // 激活导航项
    navLink.forEach(n => n.classList.remove('active'))
    this.classList.add('active')

    // 隐藏移动端导航菜单
    const navMenu = document.getElementById('nav-menu')
    navMenu.classList.remove('show')
}

可选排查项 #

如果修改拼写后仍有异常，可以自行排查两个常见问题：

• 事件绑定时是否正确将linkAction作为回调绑定到.nav__link元素上，保证函数执行时this指向被点击的导航元素
• 确认页面中存在类名为nav__link的元素，保证document.querySelectorAll('.nav__link')能获取到有效节点列表

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