无法让我的创建/登录功能工作！(本地存储)(preventDefault(); 将不起作用)

Question

所以我有一个主要的HTML页面与额外的HTML页面创建一个用户登录(作为一个创建的用户)。我使用localStorage来存储用户数据，并希望用户保持登录(在主页)，直到他们注销(还没有得到那部分，我不知道该怎么做)。
我的主要问题是，我的控制台说，它不能读取属性的preventDefault();函数，但只针对第一个函数。其次，我确实设法使它存储一些数据作为名称和密码，但它不工作的登录网页。我是否应该尝试其他方法/编写不同的代码?提前感谢您的帮助!:)

(是的，我知道这两个非常相似)
所以对于我的登录页面:

<a href="index.html"><button id="knapp">hjem</button></a>
<br>
<br>
<br>
<form onsubmit="login()">
<div id="form">
<div>
<label for="userName">Username</label>
<br>
<input id="name" name="name" type="text">
</div>
<br>
<div>
<label for="password">Password</label>
<input id="password" name="password" type="password">
</div>
<br>
<button id="submit" type="submit" >Login</button>
<p id="result">Welcome! please login</p>
<a href="lagBruker.html">har du ikke bruker? lag her!</a>
</div>
</form>

对于我的创建用户页面:

<a href="index.html"><button id="hjem">hjem</button></a>
<br>
<br>
<br>
<form onsubmit="lagBruker(event)">
<div id="form">
<div>
<label for="userName">Username</label>
<br>
<input id="name" name="name" type="text">
</div>
<br>
<div>
<label for="password">Password</label>
<input id="password" name="password" type="password">
</div>
<br>
<p id="result">trykk her for å opprette bruker</p>
<button id="submit" type="submit" >Lag Bruker</button>
<a href="login.html">login her</a>
</div>
</form>

对于我的javascript:

const lagBruker = e => {
let name = document.getElementById("name").value;
let password = document.getElementById("password").value;
let formData = JSON.parse(localStorage.getItem('formData')) || [];
let exist = formData.length &&
JSON.parse(localStorage.getItem('formData')).some(data =>
data.name.toLowerCase() === name.toLowerCase()
);
if (!exist) {
formData.push({name, password});
localStorage.setItem('formData', JSON.stringify(formData));
document.querySelector('form').reset();
document.getElementById('name').focus();
alert("Bruker er opprettet! log inn med linken")
} else {
alert("noe feil har skjedd, har du allerede bruker?")
}
e.preventDefault();
}
lagBruker();

const login = e => {
let name = document.getElementById("name").value;
let password = document.getElementById("password").value;
let formData = JSON.parse(localStorage.getItem('formData')) || [];
JSON.parse(localStorage.getItem('formData')) || [];
let exist = formData.length &&
JSON.parse(localStorage.getItem('formData')).some(data => data.name.toLowerCase() == name && data.password.toLowerCase() == password);
if(!exist){
alert("inkorrekt")
}else{
location.href = "index.html";
}
e.preventDefault();
}
login();

Answer 1

您的login函数定义为

const login = e => { 
//...
e.preventDefault();
};

但是您的表单提交调用login()，因此e最终是undefined，并且您最终调用(undefined).preventDefault()，这会抛出错误。

建议:

通常在JS中添加事件侦听器比在HTML标签上添加事件侦听器更好。

<form id="login-form">
...
</form>

const form = document.getElementById("login-form");
form.addEventListener("submit", (e) => { ... });

也可以直接从表单构造一个FormData对象，并通过输入的"名称"访问输入。属性:

form.addEventListener("submit", (e) => {
const formData = new FormData(e.target);
const name = formData.get("name");
const password = formData.get("password");
...
});