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

Question

我正在尝试创建一个登录表单，用户数据通过获取请求获取并使用以下 javascript 代码进行检查：

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

每当我检查控制台时，它都会在标题中显示错误。我尝试解决这个问题的方式有问题吗？

这是我的 HTML 表单代码（使用 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>

Answer 1

let button = document.querySelector('.btn btn-danger submit'); 是错误的。 select submit class inside btn-danger inside a btn class.

你需要 let button = document.querySelector('.btn.btn-danger.submit');。或者在我看来，向按钮添加一个 id 并使用它。

此外，我很确定 button.onclick = login(); 只是 button.onclick = login;，因为您不需要立即执行函数，而是将函数绑定到 onclick。

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

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

javascript

authentication

fetch