表单提交时页面刷新导致计算结果瞬间消失，根本原因是 `action` 属性触发了默认的 GET 请求重载；只需将 `action` 设为 `"javascript:void(0);"` 或移除 `action`，即可阻止页面跳转，保留计算结果。

在使用 HTML 表单 + JavaScript 实现简易计算器时，一个常见却容易被忽略的问题是：计算结果刚显示出来就立即变为空白。例如，你输入 1、选择 +、再输入 2，点击 = 后控制台正确输出 3，但结果输入框（）却一闪而过又恢复为空——这并非 JavaScript 赋值失败，而是表单的默认提交行为导致页面刷新，所有动态设置的 value 均被重置。

根本原因在于

标签中的 action="eval.html"：只要用户点击 （即使也绑定了 onclick="Calculate()"），浏览器就会尝试向 eval.html 发起 GET 请求，整个页面重新加载，DOM 状态丢失，包括你通过 document.getElementById('res').value = r 设置的结果。

✅ 正确解法是阻止表单的默认提交行为。最简洁的方式是将 action 修改为：

HTML设计工具专业版

企业级HTML/CSS设计系统,支持设计令牌、组件库、批量生成、主题切换与团队协作,适合团队与商业项目。

下载

立即学习“前端免费学习笔记（深入）”；

<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 绑定在 上可实现“选完即算”，但注意：若用户仅用键盘切换选项，部分浏览器可能不触发 change，可补充 oninput 或统一由按钮控制逻辑更可靠。

总结：表单内嵌计算器的核心原则是——让交互完全由 JS 驱动，切断任何可能导致页面重载的默认行为。修正 action 是第一步，后续再逐步优化安全性、健壮性与用户体验。