函数在“提交”事件上不起作用,但在开发人员控制台中运行时起作用

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

当我键入电子邮件和密码,然后通过键入 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>