Проблемы с получением функции JS для проверки моей HTML-формы

У меня возникли большие проблемы с тем, чтобы JavaScript проверял, совпадают ли адреса электронной почты в моей HTML-форме, и отображал результаты. Я пытался сделать это так, как показывает zyBook для моего класса, но ничего не вышло.

Я пытался заставить функцию сравнивать вводимые данные #email и #cemail и менять цвет фона поля на зеленый, когда они совпадают, и на красный, когда они не совпадают. Я пытался создать прослушиватель событий для запуска функции всякий раз, когда изменяются вводимые данные для #cemail. Я использую Visual Studio, и одна из основных проблем, которую я заметил, заключается в том, что когда я добавляю ".value" или ".style" или что-то подобное, они не предлагаются в качестве метода объектов в функции. Кажется, что я ссылаюсь на что-то несуществующее, но идентификаторы совпадают, поэтому я не знаю, почему это не регистрируется.

Вот соответствующий code:

<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>
Будимир
Вопрос задан12 февраля 2024 г.

1 Ответ

2
Эммануил
Ответ получен9 сентября 2024 г.

Ваш ответ

Загрузить файл.