单选按钮onclick事件返回值时报Cannot read properties of null错误如何解决

Uncaught TypeError: Cannot read properties of null (reading 'value')

错误原因 #

• 语法错误：HTML中onclick事件绑定写法不规范，正确写法应为onclick="函数名()"，你写的onclick( "myFunction();")不符合HTML事件属性的语法规则，导致点击事件无法正常触发。
• 执行时机错误：JS代码在页面DOM还未渲染完成时就直接调用了myFunction()，此时页面上的单选按钮还没有被加载到DOM树中，document.querySelector('input[name="inputtest"]:checked')匹配不到任何元素会返回null，读取null的value属性就会抛出上述类型错误。
• 未处理未选中场景：单选按钮默认是未选中状态，就算DOM已经加载完成，只要没有用户主动选中，:checked伪类选择器依然匹配不到元素，同样会返回null。

修复方案 #

第一步：修正HTML事件绑定语法 #

把单选按钮的onclick属性改为标准写法。

第二步：移除JS初始化时的主动调用，仅在点击触发时执行逻辑，同时添加空值判断避免报错。 #

修复后代码示例 #

<input type="radio" id="test123" name="inputtest" value="testing 123" onclick="myFunction();" />

function myFunction() {
  // 先获取选中元素，加空判断避免报错
  const checkedRadio = document.querySelector('input[name="inputtest"]:checked')
  if (checkedRadio) {
    const radioTest = checkedRadio.value
    console.log(radioTest)
    return radioTest
  }
  // 未选中时返回默认值，可根据业务需求调整逻辑
  return null
}
// 如果需要页面加载完成后检测一次初始值，可以把调用放在DOMContentLoaded事件里
document.addEventListener('DOMContentLoaded', function() {
  const initValue = myFunction()
  console.log('初始选中值：', initValue)
})

内容的提问来源于stack exchange，提问作者adams-j