HTML页面脚本中提交正确密码后全局变量auth未更新的问题

你的代码里有两个核心问题导致auth变量没按预期更新：

1. 事件监听对象错误 #

你把submit事件绑定在了外层的<div id="simplepwform">上，但submit事件是form元素专属的事件，div不会触发这个事件，所以你的密码校验逻辑根本没执行过。

2. 表单默认提交行为会刷新页面 #

就算你监听对了form元素，默认的GET提交会触发页面刷新，页面刷新后全局变量auth会重新被初始化为false，就算之前改了true也会被重置。

修正后的完整代码 #

HTML部分（修正form的id、移除input的多余逗号）：

<div class="center">
  Form practice
</div>

<form id="simplepwform" method="GET">
  <input id="password" name="password">
</form>

JS部分（修正监听对象、阻止默认提交）：

let auth = false; // 建议用let声明变量，避免全局污染
console.log("初始auth值:", auth);

const passwordInput = document.getElementById("password");
const ourForm = document.getElementById("simplepwform");

ourForm.addEventListener('submit', (e) => {
  // 阻止表单默认提交行为，避免页面刷新
  e.preventDefault();

  if (passwordInput.value === 'apw') {
    auth = true;
    console.log("更新后的auth值:", auth);
    alert("密码正确，可在控制台查看auth变量值");
  } else {
    alert("密码错误，请重试");
  }
});

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