点击搜索按钮显示搜索栏的JS代码运行失效如何排查

问题背景 #

需要实现的交互：用户点击搜索按钮时，页面展示对应搜索栏。当前代码运行不符合预期，前期排查动作：

• 核对onclick事件写法规范，未定位到问题
• 尝试使用addEventListener绑定事件时，获取到的按钮元素为null，因此临时改用onclick="showBar()"内联事件绑定方式

现有代码 #

HTML #

<button onclick="showBar()" class="btn btn-outline-success" type="submit">
  Search
  <img src="./images/iconmonstr-search-thin-240.png" alt="search icon">
</button>

CSS #

.form-control, .me-2 {
  animation: slide 1s 1;
}

.me-2 {
  display: none !important;
}

JavaScript #

let slideSearch = document.querySelector(".me-2");

function showBar() {
  slideSearch.style.display = "block";
}

故障根因 #

• 优先级冲突：CSS中给.me-2设置的display: none !important优先级远高于JS修改的行内样式，行内样式无法覆盖带!important标记的类样式，所以元素始终保持隐藏状态
• 元素获取为null的原因：JS脚本加载执行时机早于DOM树渲染完成，脚本运行时搜索栏、按钮元素还未挂载到页面，自然无法获取到对应节点
• 按钮默认行为干扰：当前按钮type为submit，点击后会触发表单默认提交刷新页面，就算样式修改生效也会被页面刷新重置

修复代码 #

1. 调整CSS（去掉不必要的!important，用类控制显隐） #

.form-control, .me-2 {
  animation: slide 1s 1;
}

.me-2.search-hide {
  display: none;
}

2. 修改HTML（移除内联事件，给搜索栏加初始隐藏类，注意搜索栏要添加me-2 search-hide两个类名） #

<!-- 搜索栏参考写法，确保有me-2和search-hide类 -->
<!-- <input class="form-control me-2 search-hide" type="search" placeholder="Search"> -->
<button class="btn btn-outline-success" type="submit">
  Search
  <img src="./images/iconmonstr-search-thin-240.png" alt="search icon">
</button>

3. 重写JS逻辑（等DOM加载完成后再绑定事件，阻止默认提交行为，用类切换控制显隐） #

// 等待DOM全部渲染完成后再执行逻辑，避免获取元素为null
document.addEventListener('DOMContentLoaded', () => {
  const slideSearch = document.querySelector(".me-2");
  const searchBtn = document.querySelector(".btn-outline-success");

  searchBtn.addEventListener('click', (e) => {
    // 阻止表单默认提交刷新行为
    e.preventDefault();
    // 移除隐藏类展示搜索栏
    slideSearch.classList.remove('search-hide');
  })
})

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