Uncaught (in promise) TypeError: Cannot set properties of null (setting ‘onclick’) at users.js:18

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 class="mb-3">
                <label for="useremail" class="form-label">Email:</label>
                <input type="email" class="form-control" id="useremail" aria-describedby="Email" name="useremail" required>
            </div>
            <div class="mb-3">
                <label for="userpassword" class="form-label">Password:</label>
                <input type="password" class="form-control" id="userpassword" aria-describedby="Password" name="userpassword" required>
            </div>
            <button class="btn btn-danger submit" type="submit">Login</button>
            <div class="row mt-3">
                <a href="register.html" class="text-decoration-none text-decoration-underline text-dark fst-italic">Don't have an account? Register Here.</a>
            </div>
        </form>