Question

我正在创建一个HTML页面，用户可以在其中更新自己的电子邮件地址。我附加了一个事件监听器，它将使用用户在表单中提供的电子邮件地址更新Firebase。

下面的代码给出了一个错误：Uncaught TypeError：无法在HTMLButtonElement中读取null的属性“updateEmail”。

updateEmail出现在Firebase文档中，所以我很困惑。有什么我想念的吗？谢谢你的帮助！

The Js

"use strict";
(function () {

// get the form elements from HTML
var acctEmail = document.getElementById('acctEmail'),
    acctPassword = document.getElementById('acctPassword'),
    btnUpdate = document.getElementById('btnUpdate'),
    btnDeleteAcct = document.getElementById('btnDeleteAcct'),
    auth = firebase.auth(),
    user = firebase.auth().currentUser, // get the current user
    emailtoval = acctEmail.value, // get the email from acctEmail input field
    email = JSON.stringify(emailtoval); // convert email to json string


// update email
btnUpdate.addEventListener('click', function (e) {
     user.updateEmail(email).then(function() {
        // Update successful.
        }, function(error) {
          console.log(error);
         });
    });


})(); // end Js file wrapper

这是HTML表单：

<!DOCTYPE html>
<html> 
<head> 
     <!-- head include -->
    <% include includes/head.ejs %>
</head>

<body id="accountbody">
    <!-- header include -->
    <% include includes/header.ejs %>

    <main>
        <h1> Manage Your Account </h1>

        <!-- begin account details form -->
        <h2>Update your account</h2>
        <div class="updateacctform">
            <input id="acctEmail" type="email" placeholder="Email">

            <input id="acctPassword" type="password" 
placeholder="Password">

            <button id="btnUpdate" class="updateacctbtn">Update
            </button>
        </div>

        <div>
            <h2>Delete your account</h2>
            <button id="btnDeleteAcct" class="deleteacctbtn"> Delete 
Account
            </button>
        </div>

    </main>

    <!-- footer include -->
    <% include includes/footer.ejs %>

    <!-- Js files -->
    <script src="javascripts/account.js"></script>
</body>
</html>

Answer 1

我不知道您在哪里初始化Firebase应用实例。您也没有等待当前用户准备好。您需要拨打以下电话：

// Initialize Firebase app.
firebase.initializeApp(config);
// Wait for auth state to be ready.
firebase.auth().onAuthStateChanged(function(user) {
  if (user) {
    // User is logged in. you can access firebase.auth().currentUser.
    // You can now perform operations on the user.
  } else {
    // No user logged in.
  }
});

Firebase更新电子邮件地址HTML表单

1 个答案: