JavaScript中input的keypress事件addEventListener失效报错排查

报错核心原因 #

document.getElementById("in1")返回了null，这意味着代码执行时，页面上还不存在ID为in1的input元素，因此无法调用addEventListener方法，触发了Cannot read properties of null的类型错误。

为什么会找不到元素？ #

JavaScript代码的执行时机早于DOM元素的加载时机。比如你把<script>标签放在了<head>里，或者在页面DOM树构建完成前就执行了这段脚本，此时浏览器还没解析到<input id="in1">这个元素，自然查找不到。

解决办法 #

1. 调整脚本位置

把你的script.js引用放在</body>标签之前，确保DOM元素都加载完毕后再执行脚本：

<body>
  <!-- 页面其他内容 -->
  <input type="search" id="in1" class="form-control">
  <!-- 脚本放在body末尾 -->
  <script src="script.js"></script>
</body>

2. 监听DOM加载完成事件

在脚本中使用DOMContentLoaded事件，确保DOM构建完成后再绑定事件：

document.addEventListener('DOMContentLoaded', function() {
  // 此时DOM已加载完成，可以安全获取元素
  document.getElementById("in1").addEventListener("keypress", callSearchDB);
});

function callSearchDB(e) {
  // 额外补充：判断是否按下回车键
  if (e.key === 'Enter') {
    console.log('回车键已触发');
  }
  console.log(e);
}

3. 使用script标签的defer属性

给引入脚本的<script>标签加上defer属性，脚本会在DOM加载完成后按顺序执行：

<head>
  <script src="script.js" defer></script>
</head>

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