新手首次编写JavaScript遇报错：无法读取null的addEventListener属性

嘿，刚上手JS遇到这种坑太正常了！我来帮你拆解一下问题所在，一步步解决：

首先分析核心问题：为什么streetInput会是null？ #

最常见的原因就是脚本执行时机早于DOM元素加载完成。比如你把<script>标签放在HTML的<head>里，这时候浏览器从上到下解析，脚本运行时，页面里的streetInput元素还没被创建出来，document.getElementById('streetInput')自然就返回null了。

另外也可能是ID拼写错误：仔细检查HTML里的表单元素ID是不是真的叫streetInput，注意ID是区分大小写的，比如写成StreetInput就会找不到。

然后是textContent没作用的问题：你可能用错属性了！ #

如果streetInput是<input>标签（大部分表单输入框都是），那它的内容是存在value属性里的，而不是textContent。textContent是用来设置普通元素（比如<div>、<p>）的文本内容的，对input元素完全无效。

现在给你具体的解决方案： #

方案1：把脚本放在页面末尾 #

把你的<script src="script.js"></script>放在</body>标签的前面，这样浏览器会先加载完所有DOM元素，再执行脚本：

<body>
  <!-- 你的表单元素，包括id="streetInput"的输入框 -->
  <input type="text" id="streetInput">
  <!-- 单选按钮 -->
  <input type="radio" name="address" value="123 Main St"> 123 Main St

  <!-- 脚本放在这里 -->
  <script src="script.js"></script>
</body>

方案2：用DOMContentLoaded事件包裹代码 #

如果你不想移动脚本位置，可以在脚本里监听DOM加载完成的事件，确保代码在DOM就绪后执行：

document.addEventListener('DOMContentLoaded', function() {
  // 在这里写你的所有代码，比如获取元素、绑定事件
  const streetInput = document.getElementById('streetInput');
  const radioButtons = document.querySelectorAll('input[name="address"]');

  radioButtons.forEach(radio => {
    radio.addEventListener('click', function() {
      // 用value而不是textContent设置input内容
      streetInput.value = this.value;
    });
  });
});

方案3：检查并修正属性使用 #

确认你的代码里是用value而不是textContent来设置输入框内容：

// 错误写法：
streetInput.textContent = 'Some Address';
// 正确写法：
streetInput.value = 'Some Address';

最后再排查一遍： #

• 确认HTML里的元素ID和脚本里的完全一致
• 确认单选按钮的value属性已经设置了你要填入的地址文本
• 打开浏览器的开发者工具（F12），在Elements标签里看看streetInput元素是否存在，Console标签里有没有其他报错

这样调整后，应该就能正常工作啦！

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