I am trying to create a login form whereby the users data is fetched via a fetch request and is checked with the following javascript code:

fetch('./login.php', {
    method: 'GET'
})
.then((res) => res.json())
.then(res => {
    let user = []
        for (let data of res){
            user.push({
                email: "'" data.email "'",
                password : "'" data.password "'"
            })
        }

    let button = document.querySelector('.btn btn-danger submit');

    function login(){
        let email = document.getElementById('useremail').value;
        let password = document.getElementById('userpassword').value;
        for(i=0; i < user.length; i  ){
            if(email == user[i].email && password == user[i].password){
                window.location = "home.html";
            }
        }
    }
    
    button.onclick =  login();
})

Whenever I check the console it shows the error in the title. Is there something wrong with how I am trying to go about this?

Here is my HTML code for the form (using bootstrap):

<form action="" id="loginform">
            <div >
                <label for="useremail" >Email:</label>
                <input type="email"  id="useremail" aria-describedby="Email" name="useremail" required>
            </div>
            <div >
                <label for="userpassword" >Password:</label>
                <input type="password"  id="userpassword" aria-describedby="Password" name="userpassword" required>
            </div>
            <button  type="submit">Login</button>
            <div >
                <a href="register.html" >Don't have an account? Register Here.</a>
            </div>
        </form>

CodePudding user response：

let button = document.querySelector('.btn btn-danger submit'); is wrong. It'll select a submit class inside btn-danger inside a btn class.

You need let button = document.querySelector('.btn.btn-danger.submit');. Or in my opinion, add an id to the button and use that.

Also, I am pretty sure button.onclick = login(); would be just button.onclick = login; as you don't need to execute the function immediately, but bind the function to the onclick.