单选框选中值赋值变量异常：变量返回null控制台执行正常

你遇到的问题核心是脚本执行时机不对：

• 当你的代码自动执行时，要么页面还没完全加载完（DOM元素未就绪），要么此时还没有任何单选框被选中，所以document.querySelector('input[type="radio"]:checked')返回null。
• 而你在控制台手动执行时，页面已经加载完成，且你已经选中了某个单选框，所以能正常获取到元素。

下面是具体的解决方法：

方法1：把脚本放在HTML末尾 #

将你的JS代码放在</body>标签之前，确保所有DOM元素都加载完成后再执行代码：

<body>
  <!-- 你的单选框表单 -->
  <input type="radio" id="haveread" name="check" value="yes"><label for='haveread' >Yes</label>
  <input type="radio" id="notread" name="check" value="no"><label for="notread" >No</label>

  <!-- 脚本放在这里 -->
  <script>
    const readStatus = document.querySelector('input[type="radio"]:checked');
    console.log(readStatus);
  </script>
</body>

方法2：监听单选框的选择事件（推荐，实时获取值） #

如果需要在用户选择单选框时实时获取选中的值，给单选框绑定change事件：

// 获取所有name为check的单选框
const radioGroup = document.querySelectorAll('input[name="check"]');

// 给每个单选框绑定change事件
radioGroup.forEach(radio => {
  radio.addEventListener('change', function() {
    if (this.checked) {
      const readStatus = this.value;
      console.log('选中的值：', readStatus); // 输出yes或no
    }
  });
});

方法3：用DOMContentLoaded事件触发代码 #

如果脚本必须放在<head>里，通过监听DOMContentLoaded事件确保DOM加载完成后执行：

document.addEventListener('DOMContentLoaded', function() {
  const readStatus = document.querySelector('input[type="radio"]:checked');
  console.log(readStatus);
});

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