JavaScript表单提交变量无值，需F5刷新才正常的问题求助

核心问题：你定义的userid、fname、lname、birthDate、birthday这些变量，都是在页面刚加载时就获取了输入框的初始空值，之后再也没有更新过。点击Accept按钮时，代码用的还是这些初始空值，所以控制台输出空、DOM无内容；刷新页面后浏览器可能缓存了之前的输入值，变量才会读到缓存内容，导致此时点击有效。

修复方案 #

1. 所有读取输入框值的操作，必须放在按钮点击事件内部，或者在调用验证/计算函数时实时获取最新值
2. today变量应该在点击时重新获取，避免页面长时间打开后日期不更新
3. 减少不必要的全局变量，把变量的作用域限制在需要的范围内

修改后的完整代码 #

<!DOCTYPE html>
<html>
<body>

<div id="forms">
  <form action="/action_page.php">
    <label for="user">User Id:</label>
    <input type="text" id="user" name="user" required><br>

    <label for="fname">First name:</label>
    <input type="text" id="firstname" name="fname" required><br>

    <label for="lname">Last name:</label>
    <input type="text" id="lastname" name="lname" required><br>

    <label for="birthday">Birthday:</label>
    <input type="date" id="birth" name="birthday" required><br>

    <input type="submit" id="submit-button" value="Accept">
  </form>
</div>

<div>
  <div id="results"></div>
</div>

<script>
alert("Whenever you are ready; click the OK button and then please enter your first name, last name, a User ID and your birthdate (MM/DD/YYYY format) in their respective input fields on this website.");

const resultsDiv = document.getElementById("results");

function verifyUser(userId) {
  const regex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d).{8,12}$/;
  regex.test(userId) ? console.log("Valid UserId") : console.log("Invalid UserId");
}

function verifyFirstName(name) {
  name.trim() === "" ? console.log("Invalid First Name") : console.log("Valid First Name");
}

function verifyLastName(name) {
  name.trim() === "" ? console.log("Invalid Last Name") : console.log("Valid Last Name");
}

function verifyBirthday(date) {
  date.trim() === "" ? console.log("Invalid Birthday") : console.log("Valid Birthday");
}

function daysDiff(today, birthDate) {
  const differenceMilliseconds = today.getTime() - birthDate.getTime();
  return parseInt(differenceMilliseconds / (1000 * 60 * 60 * 24));
}

function daysResults(fname, lname, daysDifference) {
  if (daysDifference < 365 * 18) {
    resultsDiv.innerHTML = "You are probably not old enough to take this class!";
  } else {
    resultsDiv.innerHTML = `${fname} ${lname}, you have been breathing for ${daysDifference} days!`;
  }
}

document.getElementById('submit-button').addEventListener('click', function(event) {
  event.preventDefault();

  // 实时获取最新输入值
  const userid = document.getElementById("user").value;
  const fname = document.getElementById("firstname").value;
  const lname = document.getElementById("lastname").value;
  const birthday = document.getElementById("birth").value;
  const today = new Date();
  const birthDate = new Date(birthday);

  // 执行验证与计算
  verifyUser(userid);
  verifyFirstName(fname);
  console.log(fname);
  verifyLastName(lname);
  console.log(lname);
  verifyBirthday(birthday);
  const daysDifference = daysDiff(today, birthDate);
  console.log(daysDifference);
  daysResults(fname, lname, daysDifference);
});

let str = "";
for (let i = 0; i < 20; i++) {
  document.write(str.padStart(i,"x") + "<br>");
} 
</script>

</body>
</html>

关键修改说明 #

• 把所有读取输入值的代码移到了点击事件内部，确保每次点击都获取最新的用户输入
• 将today的获取也放在点击事件里，保证日期是当前最新的
• 给验证和计算函数传入参数，避免依赖全局变量，提升代码的可维护性
• 使用模板字符串优化结果输出的写法

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