点击提交按钮后验证结果仅显示一瞬间便消失，根本原因是`
你遇到的“输出只显示一毫秒”并非代码逻辑错误，而是 HTML 表单的默认提交行为导致的页面刷新（reload）。当
✅ 正确解决方案有以下两种（推荐第一种，更符合现代实践）：
1. 使用 event.preventDefault() 阻止默认提交（推荐 ✅）
这是最清晰、可维护性最强的方式。修改你的 JS 函数，接收事件参数并调用 preventDefault()：
var my_name = "harhu";
var my_password = "harshali";
function my_form(event) {
event.preventDefault(); // ? 关键：阻止表单默认提交行为
var a = document.getElementById("nameForm").value;
var b = document.getElementById("passForm").value;
if (a === my_name && b === my_password) {
document.body.style.backgroundColor = "green";
document.getElementById("result").innerHTML = "Access granted! Welcome!";
} else {
document.body.style.backgroundColor = "red";
document.getElementById("result").innerHTML = "Access denied! Try again.";
}
}同时，更新 HTML 中的按钮，确保传递事件对象（现代写法）：
立即学习“前端免费学习笔记（深入）”；
? 小贴士：使用 onsubmit 绑定在 上比 onclick 在按钮上更规范，且天然支持回车提交，用户体验更好。
2. 替换为 type="button"（兼容性方案，不推荐为主流）
如原答案所提，改用 确实能避免提交，因为它天生不具备提交功能：
但该方式缺乏语义化、无障碍支持弱（如屏幕阅读器识别度低），且难以统一控制样式与交互逻辑，仅建议用于简单原型或遗留系统兼容场景。
? 安全与体验增强建议（进阶）
- 密码字段应使用 word">：隐藏输入内容，防止明文泄露；
- 使用严格相等 === 替代 ==：避免类型强制转换带来的意外匹配；
- 清空输入框或添加焦点管理（如验证失败后聚焦用户名）可提升可用性；
- 真实项目中切勿在前端硬编码密码：此例仅为学习演示，生产环境密码校验必须在服务端完成。
总结：这不是“bug”，而是对 HTML 表单机制的理解偏差。掌握 preventDefault() 是前端开发的必备基础技能——它让你真正掌控用户交互流程，而非被浏览器默认行为牵着走。
