JavaScript登录表单无响应，Firebase认证功能异常求助

核心问题分析 #

你的登录功能无响应，主要存在两个关键问题：

1. Script标签冲突：<script>标签同时设置了src="index.js"和内部代码，浏览器会优先加载外部JS文件，直接忽略标签内的代码，导致登录事件绑定逻辑根本未执行。
2. DOM元素获取不规范：直接使用login-btn这类ID名作为变量绑定事件属于非标准用法（仅部分浏览器兼容），必须通过document.getElementById或querySelector明确获取元素。

另外，登录逻辑的catch块未添加错误提示，导致空字段或错误凭据提交时无任何反馈，这也是用户看不到预期提示的原因。

修复后的完整代码 #

<!DOCTYPE html>
<html lang="en">

<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>My Website</title>
  <link rel="stylesheet" href="./style.css" type="text/css">
  <link rel="icon" href="./favicon.ico" type="image/x-icon">
</head>

<body>
  <main>
    <!--Login   -->
    <section>
      <div class="hero is-fullheight">
        <div class="hero-body is-justify-content-center is-align-items-center">
          <div class="columns is-flex is-flex-direction-column box">
            <div class="column">
              <h1 class="title">Please enter your credentials</h1>
              <label for="email">Email</label>
              <input id="login-email" class="input is-primary" type="text" placeholder="Email address">
            </div>
            <div class="column">
              <label for="Name">Password</label>
              <input id="login-pwd" class="input is-primary" type="password" placeholder="Password">
              <a href="forget.html" class="is-size-7 has-text-primary">forget password?</a>
            </div>
            <div class="column">
              <button id="login-btn" class="button is-primary is-fullwidth" type="submit">Login</button>
            </div>
            <div class="has-text-centered">
              <p class="is-size-7"> Don't have an account? <a href="index.html" class="has-text-primary">Sign up</a>
              </p>
            </div>
          </div>
        </div>
      </div>
    </section>
  </main>
  <!-- Firebase Auth -->
  <script type="module">
    //FIREBASE AUTH
    // Import the functions you need from the SDKs you need
    import {
      initializeApp
    } from "https://www.gstatic.com/firebasejs/9.13.0/firebase-app.js";
    import {
      getDatabase,
      set,
      ref,
      update
    } from "https://www.gstatic.com/firebasejs/9.13.0/firebase-database.js";
    import {
      getAuth,
      createUserWithEmailAndPassword,
      signInWithEmailAndPassword
    } from "https://www.gstatic.com/firebasejs/9.13.0/firebase-auth.js";

    // Your web app's Firebase configuration
    const firebaseConfig = {
      apiKey: "AIzaSyAalz5fFuOOG6_EZVFIO-hJRA2Sw1Yyg2A",
      authDomain: "lost-and-found-system-67568.firebaseapp.com",
      databaseURL: "https://lost-and-found-system-67568-default-rtdb.firebaseio.com",
      projectId: "lost-and-found-system-67568",
      storageBucket: "lost-and-found-system-67568.appspot.com",
      messagingSenderId: "32608786023",
      appId: "1:32608786023:web:6aea01187ecb53ce6a66c2"
    };

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

    // 登录逻辑
    const loginBtn = document.getElementById('login-btn');
    loginBtn.addEventListener('click', (e) => {
      e.preventDefault();
      const email = document.getElementById('login-email').value.trim();
      const password = document.getElementById('login-pwd').value.trim();

      // 前端字段校验
      if (!email || !password) {
        alert('请填写邮箱和密码');
        return;
      }

      signInWithEmailAndPassword(auth, email, password)
        .then((userCredential) => {
          const user = userCredential.user;
          const dt = new Date();
          update(ref(database, 'user/' + user.uid), {
            last_login: dt.toISOString()
          })
          alert('用户登录成功！');
          // 可在此添加登录后的页面跳转逻辑，如 window.location.href = 'dashboard.html';
        })
        .catch((error) => {
          alert(`登录失败：${error.message}`);
        });
    });
  </script>
</body>

</html>

关键修复点说明 #

• 移除script标签的src属性：当前登录页无需加载外部index.js，保留内部代码即可完成登录逻辑；注册逻辑请放在index.html对应的脚本中，保持页面脚本独立。
• 规范DOM元素获取：用document.getElementById('login-btn')明确获取按钮后再绑定点击事件，避免依赖浏览器非标准行为。
• 添加前端校验：调用Firebase接口前先检查字段是否为空，给用户即时反馈。
• 修正用户ID字段：Firebase用户的唯一标识是user.uid而非user.id，注册逻辑也需同步修正此问题。
• 完善错误提示：在catch块中弹出具体错误信息，方便排查问题。
• 标准化时间存储：将时间转为ISO字符串存入数据库，避免格式异常。

额外建议 #

• 注册页面的signup按钮事件绑定也需用document.getElementById('signup')获取元素，避免出现相同问题。
• 正式环境中建议替换alert为Bulma的消息组件，提升用户体验。

内容的提问来源于stack exchange，提问作者shemjay