调用getElementById获取表单输入元素时始终返回null如何解决

问题原因 #

• 单选按钮选择器不匹配：FindRadioButton函数中使用的选择器input[name="choice"]和HTML中单选按钮的name="ANDORXOR"属性不符，导致无法选中任何单选按钮，函数返回空值
• 脚本加载顺序错误：如果你的JS代码放在HTML结构之前加载，执行JS时DOM还未渲染完成，getElementById找不到对应元素就会返回null
• 额外隐藏问题：andorxor函数中operator变量未声明，会隐式成为全局变量，容易引发变量污染

修复方案 #

1. 修正FindRadioButton中的选择器参数，和HTML的name属性保持一致
2. 调整JS代码位置，放到整个HTML结构的末尾，或者用DOM加载完成事件包裹JS逻辑
3. 给未声明的变量添加let/const声明
4. 若用DOM加载事件包裹逻辑，需要把调用函数挂载到全局，避免内联onclick事件找不到函数

修改后完整可用代码 #

JS部分 #

// 等待DOM完全加载后再执行逻辑
document.addEventListener('DOMContentLoaded', function() {
  function FindRadioButton() {
    // 修改选择器的name值和HTML对应
    const rbs = document.querySelectorAll('input[name="ANDORXOR"]');
    let selectedValue;
    for (const rb of rbs) {
      if (rb.checked) {
        selectedValue = rb.value;
        break;
      }
    }
    return selectedValue
  }

  function andorxor(num1, num2) {
    num1 = parseInt(document.getElementById("num1").value)
    num2 = parseInt(document.getElementById("num2").value)
    // 给operator添加变量声明
    const operator = FindRadioButton()
    if (operator == "AND") {
      document.getElementById("replaceable").innerHTML = num1 & num2
    } else if (operator == "OR") {
      document.getElementById("replaceable").innerHTML = num1 | num2
    } else if (operator == "XOR") {
      document.getElementById("replaceable").innerHTML = num1 ^ num2
    }
  }
  // 把函数挂载到window全局，避免内联onclick找不到函数
  window.andorxor = andorxor
})

HTML部分不需要做任何改动。如果不想用DOM加载事件包裹，直接把所有JS代码放到</body>标签之前也能解决加载顺序问题。 #

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