I’ve been having so much trouble getting my JavaScript to check that the emails in my HTML form match and display results. I’ve tried doing it like the zyBook for my class shows, but I just get nothing.

I tried to have the function compare the input of #email and #cemail and change the background color of the field to green when they matched and to red when they didn’t match. I tried to create an event listener to run the function whenever the input for #cemail changed. I’m using Visual Studio, and one of the main problems that I notice is that when I add “.value” or “.style” or anything like it, they don’t get suggested as a method of the objects in the function. It seems like I’m referencing something that doesn’t exist, but the IDs match, so I don’t know why it doesn’t register.

Here is the relevant 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>