输入正确密码后显示<div>功能失效，求代码排查与解决

你的代码存在几个关键问题，导致功能无法正常运行，下面逐一说明并给出修正后的代码：

错误点分析 #

• 事件绑定对象错误：onsubmit 是 <form> 元素的专属事件，你却绑定到了密码输入框（<input>）上，输入框不存在该事件，因此永远不会触发校验逻辑。
• DOM选择器语法错误：document.getElementById("#content") 里多了前缀 #，getElementById 方法直接接收ID名称字符串即可，不需要额外添加选择器符号。
• 未阻止表单默认行为：表单提交后会自动刷新页面，即便内容短暂显示，也会因为页面重置回到隐藏状态。

修正后的完整代码 #

HTML #

<form id="passwordForm">
  Enter the password to see the content:
  <input id="pwd" type="password" name="pwd" />
</form>
<div id="content">
  Testing Content
</div>

CSS #

#content {
  height: 250px;
  width: 250px;
  background-color: red;
  margin-top: 20px;
  display: none;
}

JavaScript #

// 获取表单元素
const form = document.querySelector("#passwordForm");
// 给表单绑定submit事件
form.addEventListener("submit", function(e) {
  // 阻止表单默认提交刷新行为
  e.preventDefault();
  // 获取密码输入框的值
  const password = document.querySelector('#pwd').value;
  if (password === "test123") {
    // 正确获取content元素并修改display属性
    document.getElementById("content").style.display = "block";
  }
});

如果你不想依赖表单提交，也可以监听输入框的回车事件实现相同效果：

const input = document.querySelector("#pwd");
input.addEventListener("keydown", function(e) {
  if (e.key === "Enter") {
    e.preventDefault();
    if (this.value === "test123") {
      document.getElementById("content").style.display = "block";
    }
  }
});

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