如何获取单选按钮的值？遇TypeError与undefined问题求助

1. 加window.onload后无输出的原因 #

大概率是.buttonNext按钮属于动态渲染元素——页面加载完成（window.onload触发）时，这个按钮还没被插入到DOM中，导致document.querySelector(".buttonNext")返回null，无法绑定点击事件，自然点击后无任何反应。

解决办法：用事件委托，把点击事件绑定到父容器（甚至document）上，不管按钮何时生成都能触发：

window.addEventListener('click', function(e) {
  if (e.target.matches('.buttonNext')) {
    console.log('按钮已点击');
    // 此处写入获取单选框的逻辑
  }
});

或者用MutationObserver监听DOM变化，等按钮出现后再绑定事件：

const observer = new MutationObserver(function(mutations) {
  const btn = document.querySelector('.buttonNext');
  if (btn) {
    btn.addEventListener('click', function() {
      console.log('按钮点击触发');
      // 获取单选框逻辑
    });
    observer.disconnect(); // 找到元素后停止监听
  }
});

observer.observe(document.body, { childList: true, subtree: true });

2. 单选框返回undefined的问题 #

你原代码有个明显的错误：console.log("selected");输出的是字符串"selected"，不是你获取的selected变量！要改成console.log(selected);才能看到实际值。

另外，单选框的选择器可能不准确：

• 打开浏览器控制台（F12），定位单选按钮元素，确认类名是否真的是css-1crzc9r，或者该类名是否在父元素上，而单选框本身是input[type="radio"]；
• 推荐结合type="radio"写选择器，更精准：

// 通过类名找选中的单选框
const selectedRadio = document.querySelector('input[type="radio"].css-1crzc9r:checked');
// 如果类名是动态生成的，也可以用name属性定位
const selectedRadio = document.querySelector('input[type="radio"][name="你的单选框name属性值"]:checked');

获取到单选框元素后，要通过selectedRadio.value才能拿到它的实际值，直接打印元素只会得到DOM对象。

3. 变量声明规范问题 #

你的代码中btn、selected都未声明，属于全局变量，容易引发冲突，记得用let或const声明：

const btn = document.querySelector(".buttonNext");
// 或者
let selectedRadio = document.querySelector(...);

完整修正示例（事件委托版） #

window.addEventListener('click', function(e) {
  if (e.target.matches('.buttonNext')) {
    const selectedRadio = document.querySelector('input[type="radio"].css-1crzc9r:checked');
    if (selectedRadio) {
      console.log('选中的单选框值：', selectedRadio.value);
    } else {
      console.log('未选中任何单选框');
    }
  }
});

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