首页 > 解决方案 > 为什么它说“(函数)已定义但值从未被读取”?

问题描述

因此,我正在学习 firebase 身份验证,并在关注 youtube 视频时遇到了一个问题(请原谅我,我绝对是菜鸟)。但是,在使用简单的登录系统时,我无法让我的 HTML onclick 元素引用函数“login()”。当我检查 JS 文件时,它说函数已定义但它的值从未被读取。所以我不确定为什么会出现这个问题。

import { initializeApp } from "https://www.gstatic.com/firebasejs/9.0.2/firebase-app.js";
import { getAuth, onAuthStateChanged, createUserWithEmailAndPassword } from "https://www.gstatic.com/firebasejs/9.0.2/firebase-auth.js";
import { getFirestore, collection, getDocs } from "https://www.gstatic.com/firebasejs/9.0.2/firebase-firestore.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 = {
  apiKey: "_______________________",
  authDomain: "fir-fb-1eb95.firebaseapp.com",
  projectId: "fir-fb-1eb95",
  storageBucket: "fir-fb-1eb95.appspot.com",
  messagingSenderId: "1037178727764",
  appId: "1:1037178727764:web:c1d8c888a61829f5b9acc1"
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);
const auth = getAuth();

onAuthStateChanged(auth, (user) => {
  if (user) {
      // User is signed in, see docs for a list of available properties
      // https://firebase.google.com/docs/reference/js/firebase.User
      document.getElementById('user_div').style.display='block';
      document.getElementById('login_div').style.display='none';
      const uid = user.uid;
      // ...
  } else {
      // User is signed out
      // ...
      document.getElementById('user_div').style.display='none';
      document.getElementById('login_div').style.display='block';
  }
  });
  

function login(){
    window.alert('Hey!');
  
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">

    <link rel="stylesheet" href="style.css">
    

    <title>Document</title>
</head>
<body>
    
    
    <!--<script type="module" src='index.js' async></script>-->
    <div id="login_div" class="main_div">
        <h3>Firebase Web Login</h3>
        <input type="email" placeholder="Email..." id='email'>
        <input type="password" placeholder="Password..." id='pass'>

        <button onclick="login()">Login to Account</button>
    </div>

    <div class="logged_in" id='user_div'>
        <h3>Welcome User</h3>
        <p>Welcome to Firebase Login</p>
        <button>Logout</button>
    </div>

    <script type='module' src="index.js" async></script>

    
</body>



</html>

到目前为止,我还没有在登录功能中添加任何内容,因为我想找出问题所在。我希望我很清楚。另外,由于我是初学者,如果你们以我能理解的方式处理这个问题,那就太好了。谢谢 :)

标签: javascripthtmlfirebasefirebase-authentication

解决方案


推荐阅读