javascript - 未捕获的类型错误：无法读取 HTMLAnchorElement.linkAction 处未定义的属性“添加”

Question

给我看这个：

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

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

function linkAction(){
    // Active 
    
    navLink.forEach(n => n.classList.remove('active'))
    this.classlist.add('active')

    // remove menu mobile
    const navMenu = document.getElementById('nav-menu')
    navMenu.classList.remove('show')
}

标签： javascriptfunction

Answer 1

这是解决方案：

1. Typo : classListis case-sensitive :
   You havethis.classlist.add('active')
   但是，即使纠正这个错字也不能使代码工作，见第 2 点。
2. 缺少参数at linkAction()：
   添加eventas 参数，以便稍后识别哪个element触发了该函数。

因此，在您的html中：onclick="linkAction(event)"
然后，在您的JS中：function linkAction(event){ ... event.target.classList.add('active')}

遵循完整的代码示例：运行代码片段并查看结果：

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

// moved const assignment here outside of function
const navMenu = document.getElementById('nav-menu'); 

function linkAction(event){
    // Active
    navLink.forEach(n => n.classList.remove('active'));

    // Typo: classList is case-sensitive
    // this.classlist.add('active'); 


    // following line does the trick :-)
    event.target.classList.add('active'); 

    // remove menu mobile
    
    // better define 'const navMenu' outside this function
    // to avoid multiple assignments

    navMenu.classList.remove('show');
}

.nav__link {
  color: #333;
  margin: 1em;
  background: #eee;
}
.nav__link:hover {
  color: green;
  background: #ddd;
}
.nav__link.active {
  color: green;
  background: lime;
}

#nav-menu {
  display: none;
  color: #333;
  margin: 1em;
  background: #eee;
}
#nav-menu.show {
  display: block;
}

<div>click on any menu item below to trigger function</div>

<ul>
  <li class="nav__link" onclick="linkAction(event)">item 1 with class "nav__link"</li>
  <li class="nav__link" onclick="linkAction(event)">item 2 with class "nav__link"</li>
  <li class="nav__link" onclick="linkAction(event)">item 3 with class "nav__link"</li>
</ul>

<div class="show" id="nav-menu">
Mobile menu
  <ul>
    <li class="nav__link" onclick="linkAction(event)">Mobile item 1</li>
    <li class="nav__link" onclick="linkAction(event)">Mobile item 2</li>
    <li class="nav__link" onclick="linkAction(event)">Mobile item 3</li>
  </ul>
</div>