in 语句中的reset() 函数无论条件如何都会执行？

Question

我有这个 HTML 表单：

<form id="main">
            <p1>
                <p1 id="introduction"></p1>
                <br>
                <br>
                <p1 id="annualGoals"></p1><br>
                <p1 id ="monthlyBudget"></p1>    
                </p1>
                <br><br><br><br>
        <div id="finish">
            Reset (Yes/No)?<br>
            <input type="text" id="reset"><br><br>
            <input type="submit" id="submit" value="submit" onclick="clear()"><br><br>
            <p1 id="error">We're unable to complete your request, please refresh the page to try again.</p1>
        </div>
    </form>

在 Javascript 中连接到此函数的 onclick 应该仅在输入为“是”时清除表单，否则使用 css 默认情况下隐藏的显示。

function clear() {
    if (document.getElementById("reset").textContent == "Yes") {
        document.getElementById("main").reset()
        return
    }
    const err = document.getElementById("error");
    err.style.visibility = "visible";
    document.querySelector('#submit').disabled = true;
}

目前，无论输入什么，该功能都会重置表单。我尝试通过添加 else 条件来处理函数 if 语句，以防输入为“否”，但即使没有输入，它也会重置表单。我对 Javascript 很陌生，所以一定有一些我在逻辑中没有看到的东西。

Answer 1

您面临的问题与您尝试访问输入值并检查它是否等于“是”的方式有关。要获取输入值，您应该使用“.value”而不是“.textContent”。另外，请务必将其与“Yes”（大小写正确）进行比较，并在不是“Yes”时进行处理。

这是更正后的 JavaScript 函数：

    function clear() {
    var resetInput = document.getElementById("reset").value;
    
    if (resetInput === "Yes") {
        document.getElementById("main").reset();
    } else {
        const err = document.getElementById("error");
        err.style.visibility = "visible";
        document.querySelector('#submit').disabled = true;
    }
}

在此代码中，我们首先使用“document.getElementById("reset").value”检索“reset”输入字段的值。然后，我们将其与“Yes”（具有正确的大小写）进行比较，以决定是否重置表单或显示错误消息。如果不是“是”，它将显示错误消息并禁用提交按钮。