代码之家 › 专栏 › 技术社区 › Softly

单选按钮未按预期取值

html javascript

Softly · 技术社区 · 2 年前

以下是我的HTML和javascript代码:

HTML格式

<body>
       
        <div>
            <form id="radioform">
                <fieldset>
                    <div class="mainbox">
                        <label for="gender"><strong>Gender</strong></label><br> 
                    </div>

                    <div id="optionbox">
                        <input type="radio" id="female" name="gender" value="female" /> Female
                        <input type="radio" id="male" name="gender" value="male" /> Male
                    </div> 
                    <input type="submit" value="Submit" class="submit-btn" />
                </fieldset>
            </form>
        </div>
    </body>
    <script src="script.js"></script>

Java脚本

var genderval = "null";

const form = document.getElementById("radioform");
form.addEventListener("submit", (e) => {
    e.preventDeafult();
    genderval = document.querySelector(
    'input[name="gender"]:checked').value;
});

console.log(genderval); //test

if(genderval === "female") {
    console.log("Female");

} else if(genderval === "male") {
    console.log("Male");
}

无论我选择哪个单选按钮,它都只打印出“null”。 checked在querySelector中似乎无法正常工作,但我不明白为什么。

(var generval=“null”;仅用于测试。当我删除行时,它会返回一个未捕获的引用错误。)

2 回复 | 直到 2 年前

Sally loves Lightning 2 年前

使用 let genderval; 来定义您的变量。它是 e.preventDefault(); 。另外,把你的 if...else 内部声明 addEventListener() 方法

let genderval;

const form = document.getElementById("radioform");
form.addEventListener("submit", (e) => {
    e.preventDefault();
    genderval = document.querySelector('input[name="gender"]:checked').value;
    if (genderval === "female") {
        console.log("Female");
    } else if (genderval === "male") {
        console.log("Male");
    }
});

console.log(genderval); //test

<div>
    <form id="radioform">
        <fieldset>
            <div class="mainbox">
                <label for="gender"><strong>Gender</strong></label><br>
            </div>
            <div id="optionbox">
              <input type="radio" id="female" name="gender" value="female" /> Female 
              <input type="radio" id="male" name="gender" value="male" /> Male
          </div>
            <input type="submit" value="Submit" class="submit-btn" />
        </fieldset>
    </form>
</div>

变量为 undefined 一开始,但一旦您选中两个单选按钮中的任何一个并单击“提交”,它就会打印相应的值。

Bhavesh Lalwani 2 年前

如果有一个轻微的拼写错误,它会在 e.preventDeafult(); 正确的方法是 e.preventDefault(); 。
由于控制台日志是在addEventListener块之外使用的,所以当加载script.js文件时会触发它们,因此当触发提交事件时,它将始终显示为null。为了解决这个问题,控制台日志可以在addEventListener中移动,如下所示

    var genderval = "null";
    const form = document.getElementById("radioform");
    form.addEventListener("submit", (e) => {
        e.preventDefault();
        genderval = document.querySelector('input[name="gender"]:checked').value;
        console.log(genderval);
        if (genderval === "female") {
            console.log("Female");
        } else if (genderval === "male") {
            console.log("Male");
        }
    });

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

7 月前

Jamie · 在CSS链接的文件名中添加Jinja占位符

7 月前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

8 月前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

8 月前

Reegan · 使用Angular ngFor指令在html中渲染嵌套对象值

8 月前

wqyutv · 当找不到文件时,任何破坏错误的东西都不会出现,我该怎么解决这个问题?

8 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

8 月前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

8 月前

Lorenzo Bertolaccini · 在Angular项目中通过对话框后,在控制台中显示但在HTML中不显示的数据数组

8 月前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

8 月前