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

Question

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

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

我设置了断点，在“提交”时它获取了表单中的电子邮件和密码，但随后似乎跳回到函数的开头（无论凭据如何）。

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"

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

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

function loginUser(e) {
  e.preventDefault()

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

function not working on "submit" event, but works when ran in dev console

javascript

firebase-authentication

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

function not working on "submit" event, but works when ran in dev console

javascript

firebase-authentication

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