emailfield.value 返回空字符串

问题描述 投票:0回答:1
import {
  getAuth,
  createUserWithEmailAndPassword,
  sendEmailVerification,
} from "https://www.gstatic.com/firebasejs/11.1.0/firebase-auth.js";
import { initializeApp } from "https://www.gstatic.com/firebasejs/11.1.0/firebase-app.js";
// https://firebase.google.com/docs/web/setup#available-libraries

// Your web app's Firebase configuration
const firebaseConfig = {
   //My firebase config
};

// Initialize Firebase and declare all variables
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
const emailfield = document.getElementById("email");
const email = emailfield.value;
const passwordfield = document.getElementById("password");
const password = passwordfield.value;
const loginbtn = document.getElementById("loginbtn");

loginbtn.addEventListener("click", (event) => {
  event.preventDefault();

  //log email and password

  console.log(email);
  console.log(password);
});

^

| JavaScript 代码

因此,我尝试使用 Firebase 身份验证设置登录应用程序,但遇到了此错误:

当我使用控制台记录“密码”和“电子邮件”的值时,我得到一个空字符串,但不是未定义的。

即使我在电子邮件和/或密码字段中输入某些内容,我也会收到此错误。

这是 HTML 代码:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Sample Account Page</title>
    <link rel="stylesheet" href="styleaccount.css" />
    <link
      href="https://unpkg.com/[email protected]/css/boxicons.min.css"
      rel="stylesheet"
    />
    <script type="module" src="../scripts/accounthandler.js" defer></script>
  </head>
  <body>
    <div class="wrapper">
      <form>
        <h1>Login</h1>
        <div class="input-box">
          <input type="email" placeholder="Email" id="email" />
          <i class="bx bxs-user"></i>
        </div>
        <div class="input-box">
          <input type="password" placeholder="Password" id="password" />
          <i class="bx bxs-lock-alt"></i>
        </div>
        <div class="remember-forgot">
          <label><input type="checkbox" />Remember me</label>
          <a href="#">Forgot Password?</a>
        </div>
        <button type="submit" id="loginbtn" class="btn">Login</button>
        <div class="register-link">
          <p>
            Don't have an Account?
            <a href="register.html">Register</a>
          </p>
        </div>
      </form>
    </div>
  </body>
</html>

我尝试了以下方法:

  1. 更改 HTML 元素的 ID(和 JS 代码)

  2. 我还尝试获取元素的文本而不是值

javascript string
1个回答
0
投票

您的问题是,一旦代码运行、页面加载,您就会捕获

passwordfield
emailfield
的值。您需要在“点击”事件中分配值,如下所示:


loginbtn.addEventListener("click", (event) => {
  event.preventDefault();

  //log email and password

  const password = passwordfield.value;
  const email = emailfield.value;

  console.log(email);
  console.log(password);
});
© www.soinside.com 2019 - 2024. All rights reserved.