Question

我使用Firebase身份验证创建了一个电子邮件和密码登录页面。当我点击登录时，它将重定向到下一页但我收到以下错误

未捕获的TypeError：无法读取null的属性'addEventListener'。

我尝试添加window.location='programname.html'，但仍未解决。

我已经包含了js，html，css代码

(function() {
  // Initialize Firebase
    var config = {
      apiKey: "AIzaSyC3FyniOt7C2zKVISszaogAH4TknjnM3-s",
      authDomain: "fir-auth-546d6.firebaseapp.com",
      databaseURL: "https://fir-auth-546d6.firebaseio.com",
      projectId: "fir-auth-546d6",
      storageBucket: "fir-auth-546d6.appspot.com",
      messagingSenderId: "996823342440"
    };
    firebase.initializeApp(config);


//Get elements
const txtEmail = document.getElementById('txtEmail');
const txtPassword = document.getElementById('txtPassword');
const btnLogin = document.getElementById('btnLogin');
const btnSignup = document.getElementById('btnSignup');
const btnLogout = document.getElementById('btnLogout');

//Add login event
btnLogin.addEventListener('click', e => {
  //Get email and password

  const email = txtEmail.value;
  const pass = txtPassword.value;
  const auth = firebase.auth();
  //Sign in event
  const promise = auth.signInWithEmailAndPassword(email,pass);
  promise.catch(e => console.log(e.message));

});

btnSignup.addEventListener('click', e => {
  const email = txtEmail.value;
  const pass = txtPassword.value;
  const auth = firebase.auth();
  //Sign in
  const promise = auth.createUserWithEmailAndPassword(email,pass).then(newUser => {
	  firebase.database().ref('/userProfile').child(newUser.uid).set({email: email });
  });
  promise.catch(e => console.log(e.message));
});



btnLogout.addEventListener('click', e => {
  firebase.auth().signOut();
});

firebase.auth().onAuthStateChanged(firebaseUser => {
  if (firebaseUser) {
  window.location="sample.html";
    btnLogout.classList.remove('hide');


  } else {
    console.log('not logged in');
    btnLogout.classList.add('hide');
  }
});
}());

/* Bordered form */
body
{
 margin:0 auto;
 padding:0px;
 text-align:center;
 width:100%;
 font-family:"Times New Roman", Times, serif;
 background-color:#ECF0F1;
}

input[type=text], input[type=email] {
    width: 30%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    box-sizing: border-box;
}

/* Full-width inputs */
input[type=text], input[type=password] {
    width: 30%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    box-sizing: border-box;
}


/* Set a style for all buttons */
button {
    background-color: #4CAF50;
    color: white;
    padding: 10px 10px;
    margin: 8px 0;
    border: none;
    cursor: pointer;
    width: 10%;
    border-radius: 4px;

}

.btn-secondary {
  background-color: #1B27D1;

}

.hide {
  background-color: orange;
  display:none;
}

/* Add padding to containers */
.container {
    padding: 100px;
}

<!DOCTYPE html>
<html>
 <head>
   <meta charset="utf-8">
   <title>Login and Sign Up Page</title>
	 
   <link href="https://fonts.googleapis.com/css?family=Roboto:300,500" rel="stylesheet">
   <script src="https://www.gstatic.com/firebasejs/4.8.1/firebase.js"></script>

   <link rel="stylesheet" href="style.css">
 </head>
   <body>

     <div class="container">
     <h1>SIGN-UP FORM<h1>

    <p><input type="email" id="txtEmail" placeholder="Enter Email" name="uname" required></p>


    <p><input type="password"  id="txtPassword" placeholder="Enter Password" name="psw" required></p>

    <button id="btnLogin" class="btn btn-action" >Login</button>
    <button id="btnSignup" class="btn btn-secondary" type="signupbtn">Sign Up</button>
    <button id="btnLogout" class="btn btn-action hide" type="btnlogout">Logout</button>

  </div>

  <script src="app.js"></script>

</body>
</html>

登录时Firebase身份验证错误

0 个答案: