函数返回null或undefined：获取单选框值写入h3功能异常求助

核心问题 #

1. 事件绑定错误：h3不是表单控件，不会触发onchange事件，你的函数根本没在单选框切换时执行。
2. 页面加载时直接调用函数：页面刚加载时没有单选框被选中，document.querySelector('input[name="check"]:checked')会返回null，访问null.value直接报错，导致后续代码无法执行。
3. 未处理无选中项的情况：即使函数在正确时机执行，也需要考虑没有单选框被选中的场景，避免报错。

修正后的代码 #

HTML代码

<input type="radio" name="check" value="2" onchange="test1()" /> Option 1
<input type="radio" name="check" value="1" onchange="test1()" /> Option 2
<h3 id="r"></h3>

JavaScript代码

function test1() {
  // 先获取选中的单选框，再判断是否存在
  var checkedRadio = document.querySelector('input[name="check"]:checked');
  var select = checkedRadio ? checkedRadio.value : '未选中任何选项';
  // 直接在函数里更新h3内容，不用返回值再赋值
  document.getElementById('r').innerHTML = select;
}

// 可选：页面加载时初始化显示
test1();

关键改动说明 #

• 把onchange事件绑定到每个单选框上，确保切换选项时触发函数。
• 先获取选中的单选框元素，判断是否存在后再访问value，避免null报错。
• 直接在函数内部更新h3的内容，简化逻辑，不需要额外的变量赋值。
• 可选的初始化调用，页面加载时就显示当前选中状态（初始是未选中）。

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