为何搜索栏过滤器正常工作，输入按钮过滤器却失效？

问题根源 #

1. HTML中多个按钮复用了id="btn"，DOM规定ID必须唯一，导致选择器无法正确识别所有按钮
2. liveSearch2函数里用document.getElementById('btn')只能拿到第一个按钮的值，获取不到当前点击按钮的筛选关键词
3. 给按钮绑定oninput事件完全无效，按钮的交互触发事件是click，不需要这个绑定

修正后的代码 #

HTML部分

<input type="text" id="myInput" placeholder="搜索音乐..." title="输入名称搜索" />

<div id="myBtnContainer">
  <p class="titeltje">流派</p>
  <input value="Barok" type="button" class="btn">
  <input value="Classic" type="button" class="btn">
  <input value="Renaissance" type="button" class="btn">
  <input value="Romantic" type="button" class="btn">
  <input value="Movies" type="button" class="btn">
</div>

JavaScript部分

// 搜索栏逻辑（保留原有可用代码）
function liveSearch() {
  let search_query = document.getElementById('myInput').value;
  for (var i = 0; i < sheets.length; i++) {
    if (sheets[i].textContent.toLowerCase().includes(search_query.toLowerCase())) {
      sheets[i].classList.remove('is-hidden');
    } else {
      sheets[i].classList.add('is-hidden');
    }
  }
}
document.getElementById('myInput').oninput = liveSearch;

// 按钮过滤器修正逻辑
let knop = document.querySelectorAll('.btn'); // 通过class选择所有按钮
let activeFilter = ''; // 存储当前激活的筛选关键词

knop.forEach((btn) =>
  btn.addEventListener('click', (e) => {
    // 切换当前按钮激活状态，同时取消其他按钮的激活
    knop.forEach(b => b.classList.remove('active'));
    e.target.classList.toggle('active');
    
    // 更新筛选关键词：激活时取按钮value，取消激活则清空
    activeFilter = e.target.classList.contains('active') ? e.target.value : '';
    liveSearch2();
  }),
);

function liveSearch2() {
  // 没有激活筛选词时显示所有内容
  if (!activeFilter) {
    sheets.forEach(item => item.classList.remove('is-hidden'));
    return;
  }
  
  for (var i = 0; i < sheets.length; i++) {
    if (sheets[i].textContent.toLowerCase().includes(activeFilter.toLowerCase())) {
      sheets[i].classList.remove('is-hidden');
    } else {
      sheets[i].classList.add('is-hidden');
    }
  }
}

修正说明 #

1. ID规范修正：移除重复ID，用class统一标识按钮，符合DOM唯一性要求
2. 选择器调整：改用class选择器获取所有按钮，确保能遍历到每一个筛选按钮
3. 筛选关键词获取：在点击事件中直接取当前点击按钮的value作为筛选词，保证筛选逻辑正确
4. 无效事件移除：删掉按钮上的oninput绑定，避免无用代码
5. 体验优化：增加无激活状态时显示全部内容的逻辑，用户取消筛选后能快速回到初始状态

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