Javascript 变量中未收到表单输入值

Question

我正在开发一个 node.js 项目，目前正在开发登录和注册页面。 但不知何故，当我尝试在控制台中访问表单的文本输入值时，这些值似乎没有存储在分配给我设置的各种事件侦听器的变量中。控制台中没有任何错误，我在 VS Code 中也没有收到任何警告。

这是获取表单值的 js 文件：

```//set up event listeners
const form = document.getElementById("sign_up")
const username = document.getElementById("user_name").value
const mail = document.getElementById("mail").value
const residence = document.getElementById("residence").value
const password = document.getElementById("password").value
const repeat  = document.getElementById("repeat").value

//retrieve form data
form.onsubmit=async (event)=>{
    event.preventDefault()
    console.log("the form works!")

    //check if the passwords match
    if (password !== repeat){
        alert("passwords do not match")
    }else{
        //retrieve the data and submit form
        const result = await fetch('/api/register',{
            method: 'POST',
            headers:{
                'Content-Type':'application/json'
            },
            body:JSON.stringify({
                username,
                mail,
                residence,
                password,
                repeat
            })
        }).then(res=>{
            res.json()
        })
    }
}```

这是表格，我使用的是ejs模板引擎

```  <!-- FORM STARTS -->
            <div class="login_form" >
                <form class="form" id="sign_up" method="get">
                  <div class="form_input">
                    <label>Name</label>
                    <input type="text"  id="user_name" name="customer_name" required />
                  </div>
  
                  <div class="form_input">
                      <label>Email</label>
                      <input type="text"  id="mail" name="customer_mail" required />
                    </div>
  
                    <div class="form_input">
                      <label>Residence</label>
                      <input type="text"  id="residence" name="customer_residence" required />
                    </div>
                    <div class="form_input">
                      <label>Password</label>
                      <input type="password"  id="password" name="customer_password" required />
                    </div>
                    <div class="form_input">
                      <label>Repeat Password</label>
                      <input type="password" name="repeat_password" id="repeat" required />
                    </div>
                    <div class="login_form-terms">
                        <hr>
                        <input class="login_form-checkbox" type="checkbox">
                        <label for="">I've read and accepted the <span>Terms & Conditions</span> </label>
                        <input type="submit" class="login_form-button"value="Create my account">
                    </div>
                    <div class="login_form-sign-in-option">
                        <p>Already have an account? <a>Sign In</a></p>
                    </div>
                  
                </form>
              </div>
              <!-- FORM ENDS -->
```

有人可以向我指出可能是什么问题吗？ 我已经清除了我的浏览器缓存，尝试使用不同的浏览器，结果还是一样。

Answer 1

将读取 HTMLInputElement 值的所有 const 赋值移动到提交事件处理程序中。否则，使用您当前的代码，您将在运行时分配它们（例如，当解析和执行 JS 时），它们的值将不再改变。

您想要的是在表单即将提交时访问此值。

form.onsubmit=async (event)=>{
  const username = document.getElementById("user_name").value;
  const mail = document.getElementById("mail").value;
  const residence = document.getElementById("residence").value;
  const password = document.getElementById("password").value;
  const repeat  = document.getElementById("repeat").value;

  // Rest of the logic here
}