获取radio单选按钮值用于switch判断时出现报错的问题咨询

代码存在以下几类问题，是触发报错、取值失败的核心原因：

• 语法错误
  • 最外层孤立写function关键字后没有函数名，直接接switch逻辑，JS引擎无法解析
  • whatTest() {}定义函数时缺少function关键字，不符合函数定义语法
  • 表单HTML的闭合标签写错，写成了<form>而非</form>，会导致DOM结构解析异常
• DOM API调用错误
  • 方法名拼写错误：不存在document.getelementByNames这个API，正确写法是document.getElementsByName，注意大小写规范
  • getElementsByName返回值是匹配到的元素集合（类数组结构），不是单个DOM元素，直接访问集合的.checked属性必然报错
  • 调用getElementsByName时传入的是未定义变量option1，而非字符串'option1'，会直接触发引用错误
  • querySelector的选择器写错：你写的选择器匹配name="rate"的输入框，但实际渲染的单选框name是option1，匹配不到任何元素时访问.value会触发空值错误
• 逻辑错误
  • 取值时机完全错误：刚把单选框HTML插入DOM就立刻调用取值方法，此时用户还没进行任何选择，单选框默认无选中项，根本拿不到值
  • 类型不匹配：单选框的value默认是字符串类型，switch分支判断是全等匹配，字符串'1'和数字1不会被判为相等，就算拿到值也进不了对应case分支

调整核心逻辑：插入单选框DOM后绑定选择监听事件，等用户完成选择后再取值，重新触发分支判断，不要在渲染完DOM后立刻取值。
完整可运行代码如下：

<!-- 提前在页面中准备好DOM挂载点 -->
<div id="div1"></div>

<script>
// 全局存储选中的选项值
let testNumber;

// 页面初始化执行默认分支判断
initPageLogic();

function initPageLogic() {
  switch (testNumber) {
    case 1:
      test1();
      break;
    case 2:
      test2();
      break;
    default:
      renderRadioSelect();
      break;
  }
}

// 渲染单选选择区域，绑定交互事件
function renderRadioSelect() {
  const div1 = document.getElementById('div1');
  // 注意修正form闭合标签，保证name属性和后续选择器一致
  div1.innerHTML = `
    <form>
      <input id='rb1' type='radio' name='option1' value='1'>
      <label for="rb1">1</label>
      <input id='rb2' type='radio' name='option1' value='2'>
      <label for="rb2">2</label>
    </form>
  `;

  // 给所有单选框绑定change事件，用户选中时自动触发取值
  const radioList = document.getElementsByName('option1');
  radioList.forEach(radio => {
    radio.addEventListener('change', getSelectedValue);
  })
}

// 读取用户选中的单选值，重新执行分支判断
function getSelectedValue() {
  // 两种取值方式二选一即可
  // 方式1：querySelector直接匹配选中项，注意name值和实际属性一致
  const checkedRadio = document.querySelector('input[name="option1"]:checked');
  if (checkedRadio) {
    testNumber = Number(checkedRadio.value); // 转为数字类型，适配switch全等匹配规则
    initPageLogic();
  }

  // 方式2：遍历元素集合找选中项
  // const option1List = document.getElementsByName('option1')
  // for (let i = 0; i < option1List.length; i++) {
  //   if (option1List[i].checked) {
  //     testNumber = Number(option1List[i].value);
  //     initPageLogic();
  //     break;
  //   }
  // }
}

// 分支1业务逻辑
function test1() {
  document.getElementById('div1').innerHTML = '<p>已选中1，执行分支1逻辑</p>';
}

// 分支2业务逻辑
function test2() {
  document.getElementById('div1').innerHTML = '<p>已选中2，执行分支2逻辑</p>';
}
</script>

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