无法让我的 JS 函数验证我的 HTML 表单

Question

我在使用 JavaScript 检查 HTML 表单中的电子邮件是否匹配并显示结果时遇到了很多麻烦。我尝试过像课堂表演中的 zyBook 那样进行操作，但我什么也没得到。

我尝试让该函数比较#email 和#cemail 的输入，并在匹配时将字段的背景颜色更改为绿色，在不匹配时将字段的背景颜色更改为红色。我尝试创建一个事件侦听器，以便在 #cemail 的输入发生更改时运行该函数。我正在使用 Visual Studio，我注意到的主要问题之一是，当我添加“.value”或“.style”或类似内容时，它们不会被建议作为函数中对象的方法。好像我引用了一些不存在的东西，但 ID 匹配，所以我不知道为什么它没有注册。

相关代码如下：

<form id="userInfo">
    <label for="fname">First Name:</label>
    <input type="text" id="fname" name="fname" placeholder="John"><br>
    <label for="lname">Last Name:</label>,
    <input type="text" id="lname" name="lname" placeholder="Doe"><br>
    <label for="email">Email:</label>
    <input type="text" id="email" name="email" placeholder="abc123@gmail
.com"><br>
    <label for="cemail">Confrim Email:</label>
    <input type="text" id="cemail" name="cemail"
placeholder="[email protected]"><br>
    <label for="question">Write Question:</label>
    <textarea id="question" name="question" size="50"
    placeholder="My question is..."></textarea><br>
    <input type="submit" value="Submit">
</form>
<script>
    let cemail = document.querySelector("#cemail").value;
    let formWidget = cemail.addEventListener("change", checkEmail)


    function checkEmail(){
        let email = document.querySelector("#email").value;

        if (email.trim() === cemail.trim()) {
            email.style.backgroundColor = "green";
            cEmail.style.backgroundColor = "green";
            return true;
        } else {
            email.style.backgroundColor = "red";
            cEmail.style.backgroundColor = "red";        }

    }
</script>

Answer 1

由于我的声誉较低，我无法发表评论并提出后续问题，但我有一些话要说可能会有所帮助。

记录 cemail 变量并查看它是否为空。 VS Code 应该为您提供元素的值，因此如果没有，则可能为 null。

尝试使用 document.getElementById()，而不是 document.querySelector()。有时您需要运行一个不同的函数来完成“几乎”相同的事情。 我敢打赌你比我更了解 querySelector，但这里是

querySelector

的 Mozilla 链接，以防万一我们都忽略了一些东西。 希望这有帮助。