JavaScript单选按钮选中值获取异常：点击后返回null问题

代码里的两处关键错误： #

1. DOM元素添加错误：boxes()函数中添加第二个单选按钮时使用了todoLabel(priorityMedium);，这是语法错误，必须调用appendChild方法，否则Medium选项不会被渲染到页面中。
2. 取值逻辑错误：
   • document.getElementsByName("input[type='radio'][name=radio]")用法错误，getElementsByName仅需传入name属性值"radio"，不需要CSS选择器格式。
   • 提前获取priorityInput的值时，还未选中任何单选按钮，因此值为null；且getElementsByName返回的是NodeList集合，不能直接访问.value，需要筛选出被选中的单选按钮再取值。

修复后的完整代码： #

function boxes() {
  let body = document.querySelector("body");
  let todoLabel = document.createElement("label");
  
  let priorityHigh = document.createElement("input");
  priorityHigh.type = "radio";
  priorityHigh.value = "High";
  priorityHigh.name = "radio";
  
  let priorityMedium = document.createElement("input");
  priorityMedium.type = "radio";
  priorityMedium.value = "Medium";
  priorityMedium.name = "radio";
  
  let priorityLow = document.createElement("input");
  priorityLow.type = "radio";
  priorityLow.value = "Low";
  priorityLow.name = "radio";

  // 修复元素添加逻辑
  todoLabel.appendChild(priorityHigh);
  todoLabel.appendChild(priorityMedium);
  todoLabel.appendChild(priorityLow);
  body.appendChild(todoLabel);
}

function getValue() {
  let button = document.createElement("button");
  button.textContent = "获取选中优先级"; // 给按钮添加文字，方便识别
  document.body.appendChild(button);

  button.addEventListener("click", () => {
    // 在点击时实时获取选中的单选按钮
    let selectedRadio = document.querySelector("input[name='radio']:checked");
    // 增加空值判断，避免未选中时报错
    console.log(selectedRadio ? selectedRadio.value : "未选中任何选项");
  });
}

// 调用函数渲染元素
boxes();
getValue();

关键修复说明： #

• 修正了单选按钮的DOM添加逻辑，确保三个选项都能正常显示。
• 将取值逻辑移至按钮点击事件内部，保证每次点击都能获取当前最新的选中状态。
• 使用document.querySelector("input[name='radio']:checked")直接定位被选中的单选按钮，简化取值流程，同时增加空值判断提升代码健壮性。

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