函数不适用于"submit"事件，但在开发控制台中运行时有效

Question

我正在呈现下面的表单，下面我有一个脚本。当我加载页面，输入电子邮件和密码，然后提交时，它似乎只是重新加载页面(无论凭据如何(。

当我输入电子邮件和密码，然后通过键入loginUser()在开发控制台中执行函数时，它会按预期执行，如果creds正确，它会按照应该的方式重定向我。如果凭据错误，则触发警报事件。

我已经设置了断点；提交"；它会获取表单中的电子邮件和密码，但随后似乎会跳回到函数的开头(与凭据无关(。

let form = document.getElementById('loginform');
form.addEventListener('submit', loginUser);
function loginUser() {
let email = document.getElementById('email').value;
let password = document.getElementById('password').value;
firebase.auth().signInWithEmailAndPassword(email, password).then(() => {
window.location.href = "/";
}).catch(error => {
console.log(error)
let errorCode = error.code;
let errorMessage = error.message;
if (errorCode == 'auth/wrong-password') {
window.alert('Entered password was incorrect.');
} else if (errorCode == 'auth/user-not-found') {
window.alert('Entered email is invalid.');
} else {
window.alert('Please check your login credentials.');
}
});
};
firebase.auth().onAuthStateChanged(user => {
if (user) {
console.log(user)
user.getIdToken().then(function(token) {
//save the token in a cookie  
document.cookie = "token=" + token;
});
} else {
console.log("What up dude?");
}
});

<form id="loginform" action="" method="post">
<div class="form-group">
<label for="email">Email</label> <input class="form-control" id="email" name="email" required="required" type="text" value="">
</div>
<div class="form-group">
<label for="password">Password</label> <input class="form-control" id="password" name="password" required="required" type="password" value="">
</div>
<div class="form-group">
<input class="btn btn-primary" id="submit" name="submit" type="submit" value="Login">
</div>
</form>

Answer 1

必须移除或重新命名id="submit" name="submit"

调用表单中的任何submit都会隐藏提交方法

然后添加preventDefault((以停止提交：

function loginUser(e) {
e.preventDefault()