javascript 无法使我的创建/登录函数工作!(localStorage)(preventDefault();不起作用)

sd2nnvve  于 2022-12-10  发布在  Java
关注(0)|答案(1)|浏览(108)

因此,我有一个主HTML页面和附加HTML页面,用于创建用户和登录(作为创建的用户)。我使用localStorage存储用户数据,并希望用户保持登录(在主页),直到他们注销(还没有得到这一部分,idk做什么)。
我的主要问题是我的控制台说它不能读取preventDefault()的属性;功能,但只是第一个功能。其次,我确实设法使它存储了一些数据作为名称和密码,但它不工作的登录网页。我应该尝试其他的东西/代码不同吗?感谢提前帮助!:)
(and是的,我知道这两个非常相似)
所以对于我登录页面:

<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();
8zzbczxx

8zzbczxx1#

login函数定义为

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

但是表单提交器调用了login(),所以e最终变成了undefined,您最终调用了(undefined).preventDefault(),这将引发一个错误。

建议:

通常,最好在JS中附加事件侦听器,而不是在HTML标记上。
第一次
您还可以直接从表单构造一个FormData对象,并通过输入的“name”属性访问输入:

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

相关问题