JS滚动事件无法移除active类及点击搜索按钮移除navbar类失效问题

• 变量声明顺序错误：绑定#search-btn点击事件时，navbar变量尚未完成声明赋值，let声明的变量存在暂时性死区，此时访问navbar会抛出引用错误，导致整个点击回调中断，无法执行移除类、切换类的逻辑。
• 滚动事件逻辑异常：如果你的HTML中<header>标签未添加class="header"属性，document.querySelector('.header')会返回null，调用classList相关方法时会抛出类型错误，导致整个滚动事件回调执行中断，前面的移除active类逻辑无法运行。另外你的滚动回调内多余的嵌套大括号虽不影响语法，但属于不必要的冗余结构。

1. 调整变量声明顺序，将所有DOM查询逻辑放在事件绑定之前，保证事件回调访问变量时已经完成赋值
2. 检查HTML的<header>标签，确保添加了class="header"属性，同时删除滚动回调内多余的嵌套大括号
3. 可选优化：提前缓存.headerDOM节点，避免滚动时频繁查询DOM提升性能
4. 修正HTML中input标签id的换行写法，避免后续用到该选择器时匹配失败

修复后完整JS代码 #

// 提前查询所有需要操作的DOM元素
let searchForm = document.querySelector('.search-form');
let navbar = document.querySelector('.nav_bar');
let header = document.querySelector('.header');

document.querySelector('#search-btn').onclick = () => {
  searchForm.classList.toggle('active');
  navbar.classList.remove('active');
}

document.querySelector('#menu-btn').onclick = () => {
  navbar.classList.toggle('active');
  searchForm.classList.remove('active');
}

window.onscroll = () => {
  searchForm.classList.remove('active');
  navbar.classList.remove('active');

  if (window.scrollY > 0) {
    header.classList.add('active');
  } else {
    header.classList.remove('active');
  }
}

修正后的input标签代码 #

<input type="search" placeholder="search here ...." id="input-box">

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