单选按钮（Radio button）无法正常获取选中值问题求助

核心错误点 #

• 拼写错误：e.preventDeafult() 应为 e.preventDefault()，缺失字母t导致无法阻止表单默认提交行为，页面会直接刷新，变量赋值逻辑根本无法生效。
• 执行时机错误：页面加载时就直接执行了console.log(genderval)和性别判断逻辑，此时表单尚未提交，genderval还是初始的字符串"null"；而提交事件内的变量赋值是用户点击提交后才会触发的，所以这些逻辑必须放到提交事件的回调函数内部。

修正后的JavaScript代码 #

let genderval = null;

const form = document.getElementById("radioform");
form.addEventListener("submit", (e) => {
    // 修正拼写，阻止表单默认提交
    e.preventDefault();
    // 获取选中的单选框元素
    const selectedGender = document.querySelector('input[name="gender"]:checked');
    
    // 避免未选性别就提交的报错
    if (selectedGender) {
        genderval = selectedGender.value;
        console.log(genderval);
        
        // 将判断逻辑移到回调内，确保使用最新的选中值
        if(genderval === "female") {
            console.log("Female");
        } else if(genderval === "male") {
            console.log("Male");
        }
    } else {
        console.log("请选择性别");
    }
});

额外优化说明 #

• 把初始值从字符串"null"改为null，更符合空值的语义，也避免和字符串判断混淆。
• 增加了选中状态校验，防止用户未选择性别就提交时出现Cannot read property 'value' of null的报错。

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