解决JS中document.querySelector返回null问题，实现单选框值求和弹窗

嘿，我一眼就揪出了导致document.querySelector返回null的核心问题，还有个小细节会让你的求和逻辑偏离预期，咱们一步步来搞定：

1. 选择器与HTML元素name不匹配 #

你在JS代码里用的选择器是input[name="qa1"]和input[name="qa2"]，但HTML里单选框的name属性明明是q1和q2——名字完全对不上，浏览器找不到对应的元素，自然返回null啦！

2. 字符串拼接而非数值求和 #

就算解决了选择器的问题，直接把a和b相加也会出问题：因为input的value属性是字符串类型，"5" + "10"会得到"510"而不是你想要的15，所以得把它们转换成数字再计算。

修正后的完整代码 #

JavaScript部分 #

function myFunction() {
  // 修正选择器的name值，和HTML对应
  var a = document.querySelector('input[name="q1"]:checked').value;
  var b = document.querySelector('input[name="q2"]:checked').value;
  // 转成数字后再求和
  var sum = parseInt(a) + parseInt(b);
  alert(sum);
}

HTML部分 #

<label><input name="q1" value="5" required="" type="radio"> answare</label>
<label><input name="q2" value="10" required="" type="radio"> answare2</label>
<input class="submit-button" value="Score my Answers" name="submit" type="submit" onclick="myFunction()">

额外健壮性优化建议 #

虽然你给单选框加了required属性，但保险起见可以再加个判断，确保用户确实选中了所有选项再执行逻辑：

function myFunction() {
  var q1Checked = document.querySelector('input[name="q1"]:checked');
  var q2Checked = document.querySelector('input[name="q2"]:checked');
  
  if (!q1Checked || !q2Checked) {
    alert("请选择所有答案！");
    return;
  }
  
  var sum = parseInt(q1Checked.value) + parseInt(q2Checked.value);
  alert(sum);
}

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