当我刷新页面时 JavaScript 停止工作

Question

I have this block of JavaScript code:

var input = document.getElementById("password_field");
input.addEventListener("keyup", function(event) {
  if (event.keyCode === 13) {
   event.preventDefault();
   document.getElementById("login").click();
  }
});

firebase.auth().onAuthStateChanged(function(user) {
    if (user) {
        document.getElementById("user_div").style.display = "block";
        document.getElementById("login_div").style.display = "none";

        var user = firebase.auth().currentUser;

        if(user != null) {
            var email_id = user.email;
            var email_verified = user.emailVerified;
            document.getElementById('user_para').innerHTML = "You are logged in as<strong> " + email_id + "</strong>.";
            if (email_verified === false) {
                document.getElementById('user_verified').innerHTML = "<strong>You are not verified. Please check for an email from perason for a verification link. You will not be able to access anything without verification.";
            } else {
                document.getElementById('user_verified').innerHTML = "";
                document.getElementById('sandboxaccess').style.display = "block";
            }
        }
      
      
    } else {
        document.getElementById("user_div").style.display = "none";
        document.getElementById("login_div").style.display = "block";
    }
  });

function login () {
    var userEmail = document.getElementById('email_field').value;
    var userPass = document.getElementById('password_field').value;

    firebase.auth().signInWithEmailAndPassword(userEmail, userPass).catch(function(error) {
        // Handle Errors here.
        var errorCode = error.code;
        var errorMessage = error.message;
        window.alert("Error: " + errorMessage);
      });


    
}

function logout() {
    firebase.auth().signOut();
}

It works fine initially, but when I refresh the page, all of the JavaScript stops working. It works perfectly fine on Apache localhost (refreshing works on localhost too). What is the solution to this?

Here it is before refresh:

before refresh

Here it is after refresh:

after refresh

The logout button is in both.

Errors on console

Answer 1

I think the code is executed before the DOM is loaded.
how about this:

document.addEventListener('DOMContentLoaded', function (){
  // your code
});

Answer 2

Remove this line of code from your program:

var user = firebase.auth().currentUser

You already have a user object as the parameter of your callback function. The currentUser returned here might actually be wrongly null and overwriting the correct one being passed in.