如何修复querySelector返回null的Uncaught TypeError错误？

这个错误的核心原因是你的JavaScript代码执行时，目标DOM元素（#book-form表单）还未完成加载，导致document.querySelector('#book-form')返回null，无法调用addEventListener方法。

以下是三种有效的解决方式：

1. 将JS代码放在HTML文档末尾（</body>标签前） #

把脚本放在页面最后，确保所有DOM元素加载完成后再执行代码：

<!-- 页面其他HTML内容 -->
<form id="book-form">
  <div class="form-group">
    <input type="submit" value="Add Book" class="btn btn-primary btn-block">
  </div>
</form>

<!-- 在此处插入JS代码 -->
<script>
document.querySelector('#book-form').addEventListener('submit', (e) => {
  e.preventDefault();
  // 后续获取表单值的逻辑
});
</script>
</body>

2. 监听DOMContentLoaded事件 #

通过这个事件确保DOM加载完成后再执行脚本逻辑：

document.addEventListener('DOMContentLoaded', () => {
  const bookForm = document.querySelector('#book-form');
  bookForm.addEventListener('submit', (e) => {
    e.preventDefault();
    // 后续获取表单值的逻辑
  });
});

3. 给<script>标签添加defer属性 #

如果你的JS代码在外部文件中，或不想调整位置，给<script>标签加上defer属性，浏览器会在DOM加载完成后执行该脚本：

<script src="your-script-file.js" defer></script>

另外注意：你提供的HTML代码中<div class="form-group">标签未闭合，虽然不影响本次DOM查找，但建议修正为完整结构，避免后续出现其他潜在问题。

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