Input values are coming out as undefined?

July 3, 2022

I have a log in page that is asking for a username and a password. I want to check it against the local storage that adds and stores an object of user data (one object = username, full name, password, postcode, email, mobile). I have this so far that I want to try it out and test it, but I keep getting ‘undefined‘ when I get the console to print the username and password that the user has input into the log in screen. I can’t figure out why?

Here’s my js:

const loginForm = document.querySelector(".login-form");
    let usernameInput = document.getElementsByClassName(".lg-username").value;
    let passwordInput = document.getElementsByClassName(".lg-password").value;
    
    loginForm.addEventListener("submit", (e) => {
        e.preventDefault();
        if (localStorage.getItem("UserData")) {
            const data = JSON.parse(localStorage.getItem('UserData'))
            if(usernameInput === data.username && passwordInput === data.password) {
                console.log("ye");
            }else{
                console.log("ne");
            }
        }else{
            console.log("not regis");
        }
    
        console.log("not nice");
        console.log(localStorage);
        console.log(usernameInput);
        console.log(passwordInput);
    })

    <form class="login-form">
          <ul>
             <li><input type="text" name="username" class="lg-username" placeholder="Username" required></li>
        
             <li><input type="password" name="password" class="lg-password" placeholder="Password" required></li>
         </ul>
         <input type="submit">
         <div >
    </form>

>Solution :

First, the class name is not correct .lg-username and .lg-password not exist, it should be .username and .password.

Second, you should use querySelector instead of getElementsByClassName to get the first element which has the class, but getElementsByClassName get a HTMLCollection

Third, you need to get the value when you submit not when the script load.

const loginForm = document.querySelector(".login-form");
    let username = document.querySelector(".username");
    let password = document.querySelector(".password");
    
    loginForm.addEventListener("submit", (e) => {
        e.preventDefault();
        if (localStorage.getItem("UserData")) {
            const data = JSON.parse(localStorage.getItem('UserData'))
            if(username.value === data.username && password.value === data.password) {
                console.log("ye");
            }else{
                console.log("ne");
            }
        }else{
            console.log("not regis");
        }
    
        console.log("not nice");
        console.log(localStorage);
        console.log(username.value);
        console.log(password.value);
    })

<form class="login-form">
          <ul>
             <li><input type="text" name="username" class="username" placeholder="Username" required></li>
        
             <li><input type="password" name="password" class="password" placeholder="Password" required></li>
         </ul>
         <input type="submit">
         <div >
    </form>