Cannot see anything in the console when trying to debug a login function

Question

I am using Node.js with Express as well as Pug templates. I have a login function that is not working. I am trying to debug the code by logging the credentials (email and password) to the console. But I cannot see anything in the console.

Here is a code snippet:

const loginForm = document.querySelector('.form--login');

if (loginForm)
  loginForm.addEventListener('submit', function (e) {
    e.preventDefault();
    const email = document.getElementById('email').value;
    const password = document.getElementById('password').value;
    console.log(email, password);
    login(email, password);
  });

I have tested to see if the if statement works and it does because I placed a console.log statement in the beginning like this:

if (loginForm) console.log('True');

I can see the word True in the console, which proves that the responses are correct up to that point.

I also placed the following statement after the const loginForm...

console.log(loginForm)

I can see <form class="form form--login"></form> in the console.

But the console.log in the eventListener function produces nothing. Even if I place some text into the console.log statement, I cannot see it. It's as if the program never gets to that point.

Why is this happening?

Here is the HTML in Pug form:

extends base

block content
    main.main
    .login-form
        h2.heading-secondary.ma-bt-lg Log into your account
        form.form.form--login
        .form__group
            label.form__label(for='email') Email address
            input#email.form__input(type='email', placeholder='[email protected]', required)
        .form__group.ma-bt-md
            label.form__label(for='password') Password
            input#password.form__input(type='password', placeholder='••••••••', required, minlength='8')
        .form__group
           a.buttonS.primaryD1.fontStd(href='/login')  Login 

Answer 1

There's a couple issues. First, if you look at the compiled HTML, you'll notice the <form> element will be empty because nothing is indented underneath it in the Pug.

// current pug
form.form.form--login
.form__group

// what it needs to be
form.form.form--login
  .form__group // <-- indent to put the form groups in the form

Second, the console.log() will only be triggered when the form submits—and <a> elements won't submit forms by default. That "Login" link should probably be a submit <button>:

// current pug
a.buttonS.primaryD1.fontStd(href='/login')  Login 

// what it should probably be
button.buttonS.primaryD1.fontStd(type='submit') Log In

---

Working snippet with compiled HTML:

const loginForm = document.querySelector('.form--login');

if (loginForm)
  loginForm.addEventListener('submit', function (e) {
    e.preventDefault();
    const email = document.getElementById('email').value;
    const password = document.getElementById('password').value;
    console.log(email, password);
  });

<main class="main">
  <div class="login-form">
    <h2>Log into your account</h2>
    <form class="form--login">
      <div class="form__group">
        <label for="email">Email address</label>
        <input id="email" type="email" required="required"/>
      </div>
      <div class="form__group">
        <label for="password">Password</label>
        <input id="password" type="password" required="required" minlength="8"/>
      </div>
      <div class="form__group">
        <button type="submit">Log In</button>
      </div>
    </form>
  </div>
</main>