点击提交按钮后验证结果仅显示一瞬间便消失，根本原因是`
你遇到的“输出只显示一毫秒”并非代码逻辑错误，而是 HTML 表单的默认提交行为导致的页面刷新（reload）。当 <button> 放在 <form> 标签内部且未指定 type 属性时，浏览器会将其视为 type="submit" —— 点击即触发表单提交，整个页面重新加载，所有 JavaScript 设置的样式和 DOM 修改（如背景色、result 文本）瞬间被重置，造成“闪退”假象。
✅ 正确解决方案有以下两种（推荐第一种，更符合现代实践）：
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 中的按钮，确保传递事件对象（现代写法）：
HR面试评价助手-Word版
下载
🎯 HR面试评价助手（Word版格式） 生成可直接复制到Word文档的标准格式HR面试评价 【使用方式】 1. 发送口令：HR面试评价 2. 粘贴JD文字 3. 上传简历文档 4. 上传面试记录（可选） 5. 复制生成的评价到Word 【输出特点】 - 纯文本格式，可直接粘贴到Word - 层次清晰，标题加粗...
立即学习“前端免费学习笔记（深入）”；
<form onsubmit="my_form(event)"> <!-- 推荐：绑定到 form 的 submit 事件 -->
<p>Name</p>
<input type="text" id="nameForm">
<p>Password</p>
<input type="password" id="passForm"> <!-- ⚠️ 建议将密码输入设为 type="password" -->
<button type="submit">Submit</button> <!-- 明确声明 type="submit"，语义清晰 -->
<p id="result">-------</p>
</form>? 小贴士：使用 onsubmit 绑定在 <form> 上比 onclick 在按钮上更规范，且天然支持回车提交，用户体验更好。
2. 替换为 type="button"（兼容性方案，不推荐为主流）
如原答案所提，改用 <input type="button"> 确实能避免提交，因为它天生不具备提交功能：
<input type="button" onclick="my_form()" value="Submit">
但该方式缺乏语义化、无障碍支持弱（如屏幕阅读器识别度低），且难以统一控制样式与交互逻辑，仅建议用于简单原型或遗留系统兼容场景。
? 安全与体验增强建议（进阶）
- 密码字段应使用 <input type="password">：隐藏输入内容，防止明文泄露；
- 使用严格相等 === 替代 ==：避免类型强制转换带来的意外匹配；
- 清空输入框或添加焦点管理（如验证失败后聚焦用户名）可提升可用性；
- 真实项目中切勿在前端硬编码密码：此例仅为学习演示，生产环境密码校验必须在服务端完成。
总结：这不是“bug”，而是对 HTML 表单机制的理解偏差。掌握 preventDefault() 是前端开发的必备基础技能——它让你真正掌控用户交互流程，而非被浏览器默认行为牵着走。
