JS获取登录表单输入值为undefined问题求解

你代码里有两个核心错误，直接导致取到的输入值为undefined：

• getElementsByClassName用法错误：该方法返回的是匹配元素的集合（类数组结构），不是单个DOM元素，无法直接读取.value属性；同时传参时不需要给类名加前缀.，直接传类名字符串lg-username/lg-password即可，带点会匹配不到任何元素。
• 取值时机错误：你在页面初始加载阶段就提前读取了input的value，此时用户还未完成输入，就算元素选对了，也只能拿到初始空值，无法获取提交瞬间用户输入的最新内容。

1. 初始化阶段只获取DOM元素的引用，不要提前读取value值，选择单个元素优先用querySelector更简便
2. 在submit事件回调内部，用户触发提交时再读取input的实时value，建议加trim()去除首尾误输入的空格
3. 清理原HTML里未闭合的多余<div>标签，避免DOM结构异常

修正后完整JS代码 #

const loginForm = document.querySelector(".login-form");
// 初始化时仅获取DOM元素引用
const usernameInput = document.querySelector(".lg-username");
const passwordInput = document.querySelector(".lg-password");

loginForm.addEventListener("submit", (e) => {
    e.preventDefault();
    // 提交时再读取用户输入的最新值，去除首尾空格
    const inputUsername = usernameInput.value.trim();
    const inputPassword = passwordInput.value.trim();

    if (localStorage.getItem("UserData")) {
        const userData = JSON.parse(localStorage.getItem('UserData'));
        if(inputUsername === userData.username && inputPassword === userData.password) {
            console.log("登录校验通过");
        } else {
            console.log("用户名或密码错误");
        }
    } else {
        console.log("未查询到注册用户数据，请先完成注册");
    }

    console.log("当前输入用户名：", inputUsername);
    console.log("当前输入密码：", inputPassword);
})

修正后对应HTML结构 #

<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" value="登录">
</form>

内容的提问来源于stack exchange，提问作者paparonnie