Question

我尝试从FirebaseUI创建注销按钮，当我尝试它时不会显示注销按钮。想法是如果用户登录，退出按钮就会出来，但如果用户没有登录，按钮就会隐藏。当我尝试时，它会显示TypeError: Cannot read property 'classList' of null，这是我的退出页面

<!DOCTYPE html>
<html>
    <head>
        <script src="https://www.gstatic.com/firebasejs/4.1.3/firebase.js"></script>
        <script>
            var config = {
                apiKey: "AIzaSyBIi34ndZxxLq2l1gtpzFnAjohPU18pyCk",
                authDomain: "skripsi-adeguntoro.firebaseapp.com",
                databaseURL: "https://skripsi-adeguntoro.firebaseio.com",
                projectId: "skripsi-adeguntoro",
                storageBucket: "skripsi-adeguntoro.appspot.com",
                messagingSenderId: "181721142188"
            };
            firebase.initializeApp(config);
        </script>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    </head>
    <body>
        <script>
            var out = document.getElementById('signOut');
            firebase.auth().onAuthStateChanged(function(user){
                if(user){
                    document.body.innerHTML = "<h1>"+user.displayName+"</h1><h2>"+user.email+"</h2>";
                    out.classList.remove('hide');
                    console.log(user);
                    out.addEventListener('click', function(event) {
                        firebase.auth().signOut();
                    });
                } else {
                    console.log('user not login');
                    out.classList.add('hide');
                }
            });
        </script>
        <h1>You Done</h1>
        <button type="button" id="signOut" class="btn btn-action hide">Sign out</button>
    </body>
</html>

Answer 1

我确信代码顺序会看到这个简单的demo

<button type="button" id="signOut" class="btn btn-action hide">Sign out</button>
<button type="button" id="showBtn" class="btn btn-action" onclick="showBtn()">show</button>
<script>
function showBtn(e){
 console.log(e);
    var out = document.getElementById('signOut');
  out.classList.remove('hide');
 }
</script>

所以请像这样重新订购你的HTML：

<!DOCTYPE html>
<html>
    <head>
        <script src="https://www.gstatic.com/firebasejs/4.1.3/firebase.js"></script>
        <script>
            var config = {
                apiKey: "AIzaSyBIi34ndZxxLq2l1gtpzFnAjohPU18pyCk",
                authDomain: "skripsi-adeguntoro.firebaseapp.com",
                databaseURL: "https://skripsi-adeguntoro.firebaseio.com",
                projectId: "skripsi-adeguntoro",
                storageBucket: "skripsi-adeguntoro.appspot.com",
                messagingSenderId: "181721142188"
            };
            firebase.initializeApp(config);
        </script>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    </head>
    <body>
<h1>You Done</h1>
        <button type="button" id="signOut" class="btn btn-action hide">Sign out</button>
        <script>
            var out = document.getElementById('signOut');
            firebase.auth().onAuthStateChanged(function(user){
                if(user){
                    document.body.innerHTML = "<h1>"+user.displayName+"</h1><h2>"+user.email+"</h2>";
                    out.classList.remove('hide');
                    console.log(user);
                    out.addEventListener('click', function(event) {
                        firebase.auth().signOut();
                    });
                } else {
                    console.log('user not login');
                    out.classList.add('hide');
                }
            });
        </script>

    </body>
</html>

你可以看到我把html标签放在脚本的标签之前，我肯定会是这样的。

使用FirebaseUI时，注销按钮无法加载

1 个答案: