document.getElementById 始终返回 null

我有这段代码：

<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 开始时创建的所有变量都返回空值。有任何想法吗？