表单点击提交后结果仅闪现一瞬即消失，根本原因是`
你遇到的“输出只显示一毫秒”并非代码逻辑错误，而是 HTML 表单的默认行为在作祟：当 <button>（或 <input type="submit">）位于 <form> 标签内部时，点击它会自动触发表单提交（submit 事件），浏览器随之重新加载当前页面——这导致你刚写入的 #result 文本和背景色瞬间被重置。
✅ 正确解决方案：阻止默认提交行为
最规范、可维护性最强的方式是在 JavaScript 中显式调用 event.preventDefault()：
<form onsubmit="my_form(event)">
<p>Name</p>
<input type="text" id="nameForm">
<p>Password</p>
<input type="text" id="passForm">
<button type="submit">Submit</button>
<p id="result">-------</p>
</form>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").textContent = "Access granted! Welcome!";
} else {
document.body.style.backgroundColor = "red";
document.getElementById("result").textContent = "Access denied! Try again.";
}
}? 为什么 event.preventDefault() 是标准做法？ 语义清晰：明确表达“这是一个前端验证，不发起真实提交”； 兼容性强：适用于所有表单控件（<button>、<input type="submit">）； 可扩展：便于后续添加输入校验、异步登录等逻辑； 符合无障碍（a11y）与表单最佳实践。
⚠️ 不推荐的“替代方案”解析
答案中建议将 <button> 替换为 <input type="button">，虽能规避提交行为（因其无默认提交语义），但存在明显缺陷：
- 丧失语义化：<button> 更适合交互操作，支持更好的键盘导航（如空格/回车触发）和屏幕阅读器识别；
- 混淆职责：表单内应使用 type="submit" 明确提交意图，再通过 JS 控制行为，而非回避语义；
- 隐患遗留：若未来改用 <input type="submit"> 或未加 type 属性（某些浏览器默认为 submit），问题重现。
✅ 补充优化建议
- 使用 === 代替 == 进行严格比较，避免隐式类型转换导致意外匹配；
- 用 .textContent 替代 .innerHTML 设置纯文本内容，防止 XSS 风险；
- 为密码字段添加 type="password" 提升安全性与用户体验；
- 表单提交后清空输入框或聚焦错误字段，提升交互体验。
只要牢记：在表单内执行 JS 逻辑时，必须显式阻止默认提交行为，就能彻底解决“结果一闪而逝”的问题。
立即学习“前端免费学习笔记（深入）”；
