表单提交时页面刷新导致计算结果瞬间消失，根本原因是 `action` 属性触发了默认的 GET 请求重载；只需将 `action` 设为 `"javascript:void(0);"` 或移除 `action`，即可阻止页面跳转，保留计算结果。
在使用 HTML 表单 + JavaScript 实现简易计算器时，一个常见却容易被忽略的问题是：计算结果刚显示出来就立即变为空白。例如，你输入 1、选择 +、再输入 2，点击 = 后控制台正确输出 3，但结果输入框（<input id="res">）却一闪而过又恢复为空——这并非 JavaScript 赋值失败，而是表单的默认提交行为导致页面刷新，所有动态设置的 value 均被重置。
根本原因在于 <form> 标签中的 action="eval.html"：只要用户点击 <input type="submit">（即使也绑定了 onclick="Calculate()"），浏览器就会尝试向 eval.html 发起 GET 请求，整个页面重新加载，DOM 状态丢失，包括你通过 document.getElementById('res').value = r 设置的结果。
✅ 正确解法是阻止表单的默认提交行为。最简洁的方式是将 action 修改为：
立即学习“前端免费学习笔记（深入）”；
<form action="javascript:void(0);" method="get">
javascript:void(0) 是一个无操作的伪协议，它不会触发导航或刷新，同时保持表单结构完整。你也可以完全移除 action 属性（此时浏览器默认为当前 URL），但显式设为 void(0) 语义更清晰。
⚠️ 其他注意事项：
- eval() 存在严重安全与可维护性风险（如注入恶意运算符），生产环境应避免。推荐改用 switch 或映射函数：
function calculate(n1, n2, op) { switch(op) { case '+': return n1 + n2; case '-': return n1 - n2; case '*': return n1 * n2; case '/': return n2 !== 0 ? n1 / n2 : NaN; default: return NaN; } } - 输入校验建议增强：parseFloat() 对空字符串返回 NaN，应增加 isNaN(n1) || isNaN(n2) 判断，而非仅检查 typeof === "undefined"（因为 .value 永远是字符串，typeof 不会是 undefined）。
- onchange 绑定在 <select> 上可实现“选完即算”，但注意：若用户仅用键盘切换选项，部分浏览器可能不触发 change，可补充 oninput 或统一由按钮控制逻辑更可靠。
总结：表单内嵌计算器的核心原则是——让交互完全由 JS 驱动，切断任何可能导致页面重载的默认行为。修正 action 是第一步，后续再逐步优化安全性、健壮性与用户体验。
