document.getElementById 始终返回 null [重复]

Question

我得到了这段代码：

<form class="register" id="reg-form">
        <input type="text" class="input-box" placeholder="Username" id="username" required><br><br>
        <input type="text" class="input-box" placeholder="Full Name" id="name" required><br><br>
        <input type="email" class="input-box" placeholder="Email" id="email" required><br><br>
        <input type="password" class="input-box" placeholder="Password" id="password" required><br><br>
        <input type="password" class="input-box" placeholder="Repeat Password" id="passwordrep" required><br><br><br>
        <button class="btn-rounded-md black" id="reg-btn">Register</button>
    </form>

还有这个js：

window.onload = function() {
  var email = document.getElementById('email').value;
  var password = document.getElementById('password').value;
  var reppassword = document.getElementById('passwordrep').value;

  document.getElementById('reg-form').addEventListener('submit', function(e) {
    e.preventDefault();
    if (password == reppassword) {
      console.log("Passwords match. Submitting...");

      auth.createUserWithEmailAndPassword(email, password).then(userCredential => {
        console.log('Signed up!');
      });
    }
  });
}

但是在 js 开头创建的所有变量都返回 null。有什么想法吗？

Answer 1

您是在页面加载时检索值，而不是在提交时检索；它们总是空的（不是空的，而是空字符串）。改为：

document.getElementById('reg-form').addEventListener('submit', function(e) {
  e.preventDefault();
  var email = document.getElementById('email').value;
  var password = document.getElementById('password').value;
  var reppassword = document.getElementById('passwordrep').value;

  if (password == reppassword) {
    console.log("Passwords match. Submitting...");

    auth.createUserWithEmailAndPassword(email, password).then(userCredential => {
      console.log('Signed up!');
    });
  }
});