JavaScript Firebase 登录集成 : Uncaught ReferenceError: signIn is not defined

Question

我正在尝试制作一个通过 JavaScript 与 Firebase 集成的登录表单 https://gist.github.com/deltaepsilon/3b79aac7563cd8e55fa277913bede265 .

但是，当我加载带括号的 html 文件并尝试单击登录按钮时，出现了 Uncaught ReferenceError 。

<div id="container">

    <form id="app">

        <div class="line"> 
            <label for="password">Email</label>
            <input id="email" type="text" placeholder="Your email" class="focus"/>
        </div>

        <div class="line">
            <label for="password">Password</label>
            <input id="password" type="password" placeholder="Enter your password" class="focus"/>
        </div>

        <div class="line submit">
            <a class="button" id="login" onClick="signIn"> Log In </a>
        </div>

    </form>

</div>

JavaScript 部分:

<script type="text/javascript">
    (function() {

        var app = document.querySelector('#app');

        app.signIn = function() {

            var email    = app.email;
            var password = app.password;

            if(!email || !password) {
                return console.log('email and password required');
            }

            // Signs in user.
            firebase.auth().signInWithEmailAndPassword(email, password)
                .catch(function(error) {
                // Handles errors.
                    var errorCode = error.code;
                    var errorMsg  = error.message;
                    console.log('sign in error', error);
                });

        };
    })();
</script>

有什么问题吗？ querySelector 会查找以“app”作为 id 的内容，对吗？那么onClick =“signIn”，因为它在'app'中，应该能够调用“signIn”onclick？

抱歉我的简洁——我对网络开发真的很陌生。

Answer 1

问题是 signIn 功能在全局范围内不可用。当您将其用作 onClick="signIn" 时，它将在全局 window 对象中搜索名为 signIn 的未定义函数 - signIn 在 app 对象中定义。

您可以将 signIn 函数设置为 window 对象:window.signIn = function() { ... }。

或者使用addEventListener来附加事件监听器，而不是在html中使用onClick:

document.getElementById("login").addEventListener("click", function(){
    // Code to sign-in 
});