emailfield.value is returning an empty string

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 Code

So, I was trying to set up a login App with Firebase Authentication but I encountered this Error:

When I am logging the Value of "password" and "email" with the console I am getting an empty String, but not undefined.

I am getting this Error even when I enter something in the Email and/or Password Field.

This is the HTML Code:

<!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/boxicons@2.1.4/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>

I tried the following things:

Change the ID of the HTML element ( and the JS code )
I also tried getting the Text of the Element instead of the Value

Solution

Your issue here is that you're capturing the values of passwordfield and emailfield as soon as the code runs, on page load. You need to assign the values in your "click" event, like so:


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

  //log email and password

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

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

Edit: I should specify that the way I wrote it, those constants won't be accessible outside of the click event callback. If you want to be able to use them somewhere else, you need to first declare them using let outside of that callback, and then assign them when the event is fired