so i have a main HTML page with to additional HTML pages for creating a user an login (as a created user). Im using localStorage to store the users data and want the user to stay logged in (at the main page) until they are logged out (havent gotten to that part yet, idk what to do).
my main problem is that my console says that the it cant read the properties of the preventDefault(); function, but just for the first function. secondly i did manage to make it store some data as name and password but it did not work for the login web page. should i try something else / code it differently? thanks for helping in advance! :)

(and yes I know both of these are very similar)
so for my login page:

<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>

and for my create user page:

<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>

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

CodePudding user response：

Your login function is defined as

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

but your form submit calls login(), so e ends up being undefined, and you end up calling (undefined).preventDefault(), which throws an error.

Suggestions:

It's generally better to attach event listeners in JS rather than on the HTML tag.

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

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

Also you can construct a FormData object from the form directly, and access inputs via the input's "name" attribute:

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