点击HTML li元素筛选Google Books API分类图书无响应该如何解决？

问题原因及解决方案 #

1. 优先排查事件绑定时机

如果你的JS代码写在<head>标签里，或者执行时页面的ul#list以及下属li元素还没渲染完成，querySelectorAll('li')会拿到空的NodeList，循环不会执行，自然没有绑定任何点击事件，也不会抛出错误。
解决方法：

• 把JS代码放到</body>标签之前执行
• 或者把事件绑定逻辑包裹在DOM加载完成的回调里，示例：

document.addEventListener('DOMContentLoaded', () => {
  // 把你原有绑定事件的代码放在这里
})

2. 修正事件目标的获取逻辑

你当前用e.target获取触发事件的元素，如果li内部还有其他子元素（比如图标、span标签），点击子元素时e.target指向的是子元素而非li本身，自然匹配不到innerHTML == "Fiction"的条件。
需要换成绑定事件的元素本身e.currentTarget，同时建议用textContent.trim()替代innerHTML，避免多余标签、空格、换行符影响匹配结果。

3. 优化后的绑定代码参考

document.addEventListener('DOMContentLoaded', () => {
  const list = document.getElementById('list');
  const liList = list.querySelectorAll('li');

  liList.forEach(li => {
    li.addEventListener('click', e => {
      const category = e.currentTarget.textContent.trim();
      if(category === "Fiction") {
        searchBook('subject:fiction');
      } else {
        console.log('doesnt work');
      }
    })
  })
})

额外排查点

如果修改后还是没反应，可以先在事件回调第一行加console.log('点击触发了')，确认事件是否成功绑定，如果没打印就说明还是绑定时机的问题，再检查DOM元素的id是否正确拼写、有没有和其他元素id重复即可。

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