如何点击验证表单密码，正确时同页不刷新展示隐藏div？

原有代码的错误点 #

• 没有定义变量x就直接使用，且隐藏元素用的是class="hidden"，你却调用了getElementById选择器，完全匹配不到对应元素
• 事件绑定错误：onsubmit是<form>标签的专属事件，你绑定给了普通按钮，点击按钮根本不会触发校验逻辑
• 校验逻辑分支错误：密码错误的提示逻辑写到了「密码校验通过」的分支里，逻辑完全混乱
• 没有阻止表单默认提交行为，如果后续调整了事件绑定，默认提交会触发页面刷新

修正后的完整可运行代码 #

HTML部分 #

<form method="post" id="pswdForm">
  <label for="pass">请输入密码</label>
  <input type="password" id="pass">
  <input type="submit" value="提交">
</form>
<div class="hidden" id="content">
  <p>这部分是只有输入正确密码才能看到的内容</p>
</div>

CSS部分 #

.hidden {
  display: none;
}

JS部分 #

// 给表单绑定提交事件
document.getElementById('pswdForm').addEventListener('submit', function(e) {
  // 阻止表单默认提交，避免页面刷新
  e.preventDefault();
  const correctPswd = 'admin';
  const inputPswd = document.getElementById('pass').value;
  const hiddenContent = document.getElementById('content');

  if (inputPswd === correctPswd) {
    // 密码正确，移除隐藏类展示内容
    hiddenContent.classList.remove('hidden');
  } else {
    // 密码错误提示
    alert('密码错误，请重试');
    // 确保内容保持隐藏
    hiddenContent.classList.add('hidden');
  }
})

注意事项 #

这种纯前端校验密码的方式极度不安全，密码明文写在JS代码里，任何人打开网页源码都能直接看到正确密码，只能用来做本地练习或者完全无保密需求的场景。如果需要实际商用的校验能力，必须把密码传到后端做校验，再返回是否展示内容的结果。

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