実現したいこと
2つのシステムにおいてFirebaseでログインシステムをHTMLとJavaScriptで構築したい
発生している問題・分からないこと
JavaScript
1 <!-- ログインフォーム -->2 <form id="loginForm">3 <input type="email" id="email" name="email" placeholder="Eメール" required><br>4 <input type="password" id="password" name="password" placeholder="パスワード" required><br>5 6 <button type="button" onclick="login()">ログイン</button>7 </form>8 9 <!-- JavaScript -->10 <script>11 const loginForm = document.getElementById('login-form');12 loginForm.addEventListener('submit', (event) => {13 event.preventDefault();14 const email = document.getElementById('email').value;15 const password = document.getElementById('password').value;16 17 // Firebaseログイン処理18 firebase.auth().signInWithEmailAndPassword(email, password)19 .then((userCredential) => {20 // ログイン成功時の処理21 const user = userCredential.user;22 window.location.href = "伏せさせていただきます"; // 別のページにリダイレクト23 })24 .catch((error) => {25 // ログイン失敗時の処理26 const errorCode = error.code;27 const errorMessage = error.message;28 console.error(errorCode, errorMessage);29 });30 });31 </script>
これを2つのシステムで実行した時、片方は正常に動作しましたが、もう片方はログインできません。
エラーメッセージ
error
1Uncaught TypeError: Cannot read properties of null (reading 'addEventListener') 2Uncaught ReferenceError: firebase is not defined
該当のソースコード
JavaScript
1loginForm.addEventListener('submit', async (event) => {}2firebase.initializeApp(firebaseConfig);
試したこと・調べたこと
上記の詳細・結果
2つのものを同じコードに変更し、ディレクトリを再確認。
補足
特になし
0 コメント