У меня возникли большие проблемы с тем, чтобы 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>