标题：解决 HTML 表单中下拉计算器结果被清空的问题

花韻仙語 2026-01-24 00:00:00 次阅读

表单提交时页面刷新导致计算结果瞬间消失，根本原因是 `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 修改为：

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;
  }
}