点击事件失效，控制台报Uncaught TypeError错误，如何修复？

嗨，我来帮你搞定这个问题！你遇到的Uncaught TypeError: Cannot read property 'addEventListener' of null错误，主要是两个原因导致的，咱们一步步来解决：

1. JS代码执行时机过早 #

当你的JavaScript代码运行时，浏览器还没完成对<button id="btn">元素的解析，所以document.getElementById("btn")返回了null，自然没法调用addEventListener方法。

解决办法： #

• 把JS代码放到HTML末尾：将脚本放在</body>标签之前，确保所有DOM元素都加载完成后再执行JS。
• 用DOM加载完成事件包裹代码：如果不想移动代码位置，可以把逻辑放在DOMContentLoaded事件回调里，确保DOM准备就绪后再执行：

document.addEventListener('DOMContentLoaded', function() {
  // 这里放你的点击事件代码
});

2. 代码里的两个小错误 #

• 你用了innerHTML("This is text")，但innerHTML是DOM元素的属性，不是方法，应该用赋值操作：innerHTML = "This is text"。
• 你的HTML里没有id="para"的元素，得添加这个元素，否则又会出现找不到元素的错误。

修复后的完整代码 #

HTML部分： #

<ul id="myList">
  <li>item1</li>
  <li>item 2</li>
</ul>
<button id="btn">Click</button>
<p id="para"></p> <!-- 添加这个元素 -->
<form name="myForm">
  Select output mode:
  <input type="radio" name="output" value="printer" checked /> Printer
  <input type="radio" name="output" value="scanner" /> Scanner
</form>

JavaScript部分（放在HTML末尾）： #

document.getElementById("btn").addEventListener("click", function(){
  document.getElementById("para").innerHTML = "This is text";
});

这样修改后，点击按钮就能正常显示文本啦！

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