代码之家 › 专栏 › 技术社区 › 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");
        }
    });