HTML表单提交事件无法读取内容，控制台无输出求助

核心问题是你的表单输入框和登录按钮都不在<form class="form">标签内部，点击按钮时不会触发form的submit事件，导致你写的监听代码完全没执行，控制台自然没有输出。

修复步骤 #

把所有表单相关的元素（包含输入框和按钮的.form__group容器）全部移动到<form class="form">标签内部，这样点击按钮（按钮默认类型为submit）才会触发form的submit事件。

修正后的完整代码 #

HTML部分 #

<div class="login-form">
  <h2 class="heading-secondary ma-bt-lg">Log into your account</h2>
  <form class="form">
    <div class="form__group">
      <label class="form__label" for="email">Email address</label>
      <input
        class="form__input"
        id="email"
        type="email"
        placeholder="you@example.com"
        required=""
      />
    </div>
    <div class="form__group ma-bt-md">
      <label class="form__label" for="password">Password</label>
      <input
        class="form__input"
        id="password"
        type="password"
        placeholder="••••••••"
        required=""
        minlength="8"
      />
    </div>
    <div class="form__group">
      <button class="btn btn--green">Login</button>
    </div>
  </form>
</div>

<!-- <script src="/js/login.js"></script> -->

JavaScript部分（无需修改，保持原样即可） #

document.querySelector('.form').addEventListener('submit', (e) => {
  e.preventDefault();
  const email = document.getElementById('email').value;
  const password = document.getElementById('password').value;
  console.log(email, password);
});

修改完成后，点击登录按钮就会触发submit事件，控制台就能正常打印邮箱和密码的值了。

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