90129


javascript初心者です。  
Firebaseでログイン機能を作っているのですが、Uncaught TypeError: Cannot set properties of null
(setting
'onclick')のエラーが出たため色々調べてscriptの読み込みをbody下部に入れてみたり、window.onloadやDOMContentLoadedをやってみたのですが  
Uncaught TypeError: Cannot set properties of null (setting 'onclick') at
window.onload  
になるだけでいろいろ考えたのですが分かりませんでした  
無知ですみませんがどなたかご教示お願いします。

login.html

[code]

    <!DOCTYPE html>
        <head>
            <script type="module">
                // Import the functions you need from the SDKs you need
                import { initializeApp } from "https://www.gstatic.com/firebasejs/9.9.0/firebase-app.js";
                // TODO: Add SDKs for Firebase products that you want to use
                // https://firebase.google.com/docs/web/setup#available-libraries
              
                // Your web app's Firebase configuration
                const firebaseConfig = {
                };
              
                // Initialize Firebase
                const app = initializeApp(firebaseConfig);
              </script>
              <link rel="stylesheet" href="auth.css">
        </head>
        <body>
    <div class="form-wrapper">
        <div class="logo">
            <img src="room0/images/wetch-logo-invisible.png" width="255" height="50">
        </div>
        <h1>サインイン</h1>
        <form>
          <div class="form-item">
            <label for="email"></label>
            <input type="email" name="email" required="required" placeholder="メールアドレス" id="email"></input>
          </div>
          <div class="form-item">
            <label for="password"></label>
            <input type="password" name="password" required="required" placeholder="パスワード" id="password"></input>
          </div>
          <div class="button-panel">
            <button type="submit" class="button" id="signin" onclick="signIn()">ログイン</button>
          </div>
        </form>
        <div class="form-footer">
          <p><a href="register.html">アカウント作成</a></p>
          <p><a href="#">パスワードを忘れた場合</a></p>
        </div>
      </div>
      <script type="module" src="auth.js"></script>
    </body>
    
[/code]

auth.js

[code]

    import { getAuth, signInWithEmailAndPassword } from "https://www.gstatic.com/firebasejs/9.9.0/firebase-auth.js"
    const auth = getAuth();
    window.onload = function (){
    document.getElementById("signIn").onclick = function signIn(){
      var email = document.getElementById('email').value;
      var password = document.getElementById('password').value;
      signInWithEmailAndPassword(auth, email, password)
      .then(function(){
        console.log("signin successful");
      })
      .catch((error) => {
        const errorCode = error.code;
        const errorMessage = error.message;
        console.log("error:" + errorCode + errorMessage);
      });
    }
    }
    
[/code]


CC BY-SA 4.0
2022-07-17T17:34:14.990
90045
2022-07-21T09:47:36.683
2022-07-20T06:29:55.737
51247
51247
question
javascript html firebase
Uncaught TypeError: Cannot set properties of null (setting 'onclick') が解決できません

[code]

    getElementById("signIn")
    
[/code]

[code]

    <button ... id="signin" ...>
    
[/code]

`signIn` というIDが存在しないからだと思います。  
（html側に書かれてるIDは `signin` / 大文字小文字が異なるので別物として扱われている）


CC BY-SA 4.0
2022-07-21T09:47:36.683
90129
2022-07-21T09:47:36.683
53573
90045
answer