JavaScript Firebaseログイン統合：未取得ReferenceError：signInが定義されていません

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は、そのIDの権利として 'app'で何かを探しますか？だからonClick = "signIn"、それは 'app'にあるので、 "signIn" onclickを呼び出すことができるはずですか？

ご迷惑をおかけして申し訳ありません。ウェブデベロッパーにとって本当に新しいです。

Answer 1

問題はsignInです。グローバルには使用できません。 onClick="signIn"として使用すると、signInという名前の関数が定義されていないため、グローバルwindowオブジェクトが検索されます。signInがappオブジェクトに定義されています。

signIn機能をwindowオブジェクトに設定することができます。window.signIn = function() { ... }です。

またはその代わりにHTMLでonClickを使用してのイベントリスナーを添付するaddEventListenerを使用します。

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