I’m getting a ‘typeError Cannot read properties of undefined’ in javascript login page

I’m not quite sure why but I’m getting the aforementioned error when execution hits the ‘setFormMessage()’ function. Inside this function, I have a ‘classList.remove’ method that is supposed to remove any current messages in the form if any, then add any new errors to the form. Obviously, it’s not working.

Here is pertinent code:

index.html

<form class="form form--hidden" id="createAccount">
        <h1 class="form__title">Create Account</h1>
        <h3 class="form_message form__message--success"></h3>
        <div class="form__message form__message--error"></div>
        <div class="form__input-group">
            <input type="text" id="firstName" class="form__input" autofocus placeholder="First Name">
            <div class="form__input-error-message"></div>
        </div>
        <div class="form__input-group">
            <input type="text" id="lastName" class="form__input" autofocus placeholder="Last Name">
            <div class="form__input-error-message"></div>
        </div>
        <div class="form__input-group">
            <input type="text" id="signupEmail" class="form__input" autofocus placeholder="Email Address">
            <div class="form__input-error-message"></div>
        </div>
        <div class="form__input-group">
            <input type="password" id="signupPassword" class="form__input" autofocus placeholder="Password">
            <div class="form__input-error-message"></div>
        </div>
        <div class="form__input-group">
            <input type="password"  id="confirmPassword" class="form__input" autofocus placeholder="Confirm password">
            <div class="form__input-error-message"></div>
        </div>
        <button class="form__button" type="submit">Continue</button>
        <p class="form__text">
            <a class="form__link" href=".." id="linkLogin">Already have an account? Sign in</a>
        </p>
    </form>

index.js

let firstName = '';
let lastName = '';
let email = '';
let password = '';
let confirmPassword = '';

//signing new users up
const signupForm = document.querySelector('#createAccount');
signupForm.addEventListener('submit', (e) => {
    e.preventDefault();
    //get user info
    firstName = signupForm['firstName'].value
    lastName = signupForm['lastName'].value
    email = signupForm['signupEmail'].value
    password = signupForm['signupPassword'].value
    confirmPassword = signupForm['confirmPassword'].value
    if (validate(firstName, lastName, email, password)) {
        console.log('user created', email);
       }
    createUserWithEmailAndPassword(auth, email, password)
        .then((cred) => {
            console.log('creating user credentials in firebase')
        })

        .catch((err) => {
            const errorCode = err.code
            const errorMessage = err.message
            console.log(errorCode + " " + errorMessage)
        })


    let createdNote = 'User successfully created';
    setSuccess(signupForm, createdNote)
}); //end signupForm

//signing in existing users
const logInForm = document.querySelector('#login');
logInForm.addEventListener('submit', (e) => {
    e.preventDefault();
    email = logInForm['signInUserName'].value
    password = logInForm['signInPassword'].value

    signInWithEmailAndPassword(auth, email, password)
        .then((cred) => {
            if (validate(email, password)) {
                console.log("user signed in ", cred.user)
                logInForm.reset()
            }

        })
        .catch((err) => {
            console.log(err.message)
            setFormMessage(logInForm, "error", err.message);
            //setInputError(logInForm, "error", err.message)
        })

    console.log("logInForm: " + firstName, lastName, email);
});

function setFormMessage(formElement, type, message) {
     console.log('entering setFormMessage function')
    const messageElement = document.getElementsByClassName(".form__message");
    messageElement.textContent = message;
//****************************************************************************
// **error occurs on the next line here:**
// Uncaught TypeError: Cannot read properties of undefined (reading 'remove')
//****************************************************************************
    messageElement.classList.remove("form__message--success", "form__message--error");
    messageElement.classList.add(`form__message--${type}`);
}

function setInputError(inputElement, message) {
    console.log('entering setInputError function');
    inputElement.classList.add("form__input--error");
    inputElement.parentElement.querySelector(".form__input-error-message").textContent = message;
}

function clearInputError(inputElement) {
    console.log('entering clearInputError function')
    inputElement.classList.remove("form__input--error");
    inputElement.parentElement.querySelector(".form__input-error-message").textContent = "";
}

function setSuccess(inputElement, message) {
    console.log('entering setSuccess function')
    inputElement.classList.add("form__message--success");
    inputElement.parentElement.querySelector(".form_message--success").textContent = message;
}

function validate(firstName, lastName, email, password) {
    console.log('entering validate function')
    let nameregex = /[a-zA-Z]+/;
    let emailregex = /^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:.[a-zA-Z0-9-]+)*$/;
    let passwordregex = /^(?=.*d)(?=.*[a-z])(?=.*[A-Z])(?=.*[!@#$%^&*]).{8,}$/;
    let confirmPW = confirmPassword;
    let lowerCaseLetters = /[a-z]/g;
    let upperCaseLetters = /[A-Z]/g;
    let numbers = /[0-9]/g;
    let specialChar = /[!@#$%&’*]/g;

    if (!nameregex.test(firstName)) {
        console.log('problem with firstName')
        alert("the name should only contain alphabetical characters");
        return false;
    }

    if (!nameregex.test(lastName)) {
        console.log('problem with lastName')
        alert("the name should only contain alphabetical characters");
        return false;
    }

    if (!emailregex.test(email)) {
        let message = 'Please enter a valid email address.'
        setFormMessage('createAccount', 'error', message);
        return false;
    }

    if (!passwordregex.test(password)) {
        console.log('problem with password')
        let message = "passwords must contain at least one of each: upper and lower case letters, " +
            "numbers and special characters."
        setFormMessage('createAccount', 'error', message);
        return false;
    }

    if (confirmPW !== password) {
        console.log('passwords don't match')
        let message = "passwords don't match."
        setSuccess("createAccount", 'error', message)
    }

    return true;

}

document.addEventListener("DOMContentLoaded", () => {
    const loginForm = document.querySelector("#login");
    const createAccountForm = document.querySelector("#createAccount");

    document.querySelector("#linkCreateAccount").addEventListener("click", e => {
        e.preventDefault();
        loginForm.classList.add("form--hidden");
        createAccountForm.classList.remove("form--hidden");
    });

    document.querySelector("#linkLogin").addEventListener("click", e => {
        e.preventDefault();
        loginForm.classList.remove("form--hidden");
        createAccountForm.classList.add("form--hidden");
    });

    loginForm.addEventListener("submit", e => {
        e.preventDefault();

        // Perform your AJAX/Fetch login

        //setFormMessage(loginForm, "error", "Invalid username/password combination");
    });

    document.querySelectorAll(".form__input").forEach(inputElement => {
        inputElement.addEventListener("blur", e => {
            if (e.target.id === "signupUsername" && e.target.value.length > 0 && e.target.value.length < 10) {
                setInputError(inputElement, "Username must be at least 10 characters in length");
            }

        });

        inputElement.addEventListener("input", e => {
            clearInputError(inputElement);
        });
    });

});

main.css

body {
    --color-primary: #009579;
    --color-primary-dark: #007f67;
    --color-secondary: #252c6a;
    --color-error: #cc3333;
    --color-success: #4bb544;
    --border-radius: 4px;

    margin: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    background-size: cover;
}

.container {
    width: 400px;
    max-width: 400px;
    margin: 1rem;
    padding: 2rem;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.2);
    border-radius: var(--border-radius);
    background: #ffffff;
}

.container,
.form__input,
.form__button {
    font: 500 1rem 'Quicksand', sans-serif;
}

.form--hidden {
    display: none;
}

.form > *:first-child {
    margin-top: 0;
}

.form > *:last-child {
    margin-bottom: 0;
}

.form__title {
    margin-bottom: 2rem;
    text-align: center;
}

.form__message {
    text-align: center;
    margin-bottom: 1rem;
}

.form__message--success {
    color: var(--color-success);
}

.form__message--error {
    color: var(--color-error);
}

.form__input-group {
    margin-bottom: 1rem;
}

.form__input {
    display: block;
    width: 100%;
    padding: 0.75rem;
    box-sizing: border-box;
    border-radius: var(--border-radius);
    border: 1px solid #dddddd;
    outline: none;
    background: #eeeeee;
    transition: background 0.2s, border-color 0.2s;
}

.form__input:focus {
    border-color: var(--color-primary);
    background: #ffffff;
}

.form__input--error {
    color: var(--color-error);
    border-color: var(--color-error);
}

.form__input-error-message {
    margin-top: 0.5rem;
    font-size: 0.85rem;
    color: var(--color-error);
}

.form__button {
    width: 100%;
    padding: 1rem 2rem;
    font-weight: bold;
    font-size: 1.1rem;
    color: #ffffff;
    border: none;
    border-radius: var(--border-radius);
    outline: none;
    cursor: pointer;
    background: var(--color-primary);
}

.form__button:hover {
    background: var(--color-primary-dark);
}

.form__button:active {
    transform: scale(0.98);
}

.form__text {
    text-align: center;
}

.form__link {
    color: var(--color-secondary);
    text-decoration: none;
    cursor: pointer;
}

.form__link:hover {
    text-decoration: underline;
}

Where did I go wrong? Thanks in advance.I have tried using remove(...MessageElement.classList); based on SO research at Clear element.classList

In fact, if I comment out that line of code, the error goes on to the following line and identifies “classList.add()” as the culprit.

Please help me understand the problem.