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> 

그리고 자바 스크립트 부분 :

<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을 호출 할 수 있어야합니까?

불편을 끼쳐 드려 죄송합니다. 저는 web-dev에 처음으로 익숙합니다.

Answer 1

문제는 전체적으로 사용할 수없는 signIn 기능입니다. onClick="signIn"으로 사용하면 정의되지 않은 signIn이라는 함수에 대한 글로벌 window 개체를 검색합니다. 즉 signIn이 app 개체에 정의되어 있습니다.

signIn 기능을 window 개체 : window.signIn = function() { ... }으로 설정할 수 있습니다.

또는 HTML 대신에 onClick를 사용하는 이벤트 리스너를 연결하는 addEventListener를 사용 : 같은 firebase.auth로,

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