我有一個登錄頁面，要求輸入用戶名和密碼。我想根據添加和存盤用戶資料物件（一個物件 = 用戶名、全名、密碼、郵政編碼、電子郵件、手機）的本地存盤來檢查它。到目前為止，我有這個，我想嘗試一下并測驗它，但是undefined當我讓控制臺列印用戶在登錄螢屏中輸入的用戶名和密碼時，我一直得到''。我想不通為什么？
這是我的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>uj5u.com熱心網友回復：
一、類名不正確不存在，應該是.lg-usernameand 。.lg-password.username.password
其次，您應該使用querySelector而不是getElementsByClassName獲取具有該類的第一個元素，但是getElementsByClassName得到一個HTMLCollection
第三，您需要在提交時獲取值，而不是在腳本加載時獲取。
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>轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/497775.html
標籤：javascript