如何修复 HTML 表单中下拉选择触发计算后结果被清空的问题

在使用 HTML 表单 + JavaScript 实现简易计算器时，一个常见却容易被忽视的问题是：点击“=”按钮或切换运算符后，结果一闪而过随即消失。这并非 JavaScript 计算逻辑出错（控制台 console.log(r) 仍能正确输出），而是由 <form> 元素的默认提交行为引发的页面刷新所致。

根本原因在于：

• 当 <form> 设置了 action="eval.html"（或任何非空 action），无论通过 <input type="submit"> 点击，还是 <select onchange> 触发 Calculate() 后浏览器自动尝试提交，都会向目标 URL 发起 GET 请求；
• 页面重新加载后，所有表单控件（包括 #res）恢复初始状态（空值或默认值），导致刚写入的计算结果被清除。

✅ 正确解决方案是 阻止表单默认提交行为。推荐做法如下：

1. 将 action 设为 javascript:void(0)（如答案所示），彻底禁用跳转：

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

   

   灵云AI开放平台

   灵云AI开放平台

   下载

   <form action="javascript:void(0);" method="get">

2. 更现代、语义更清晰的方式是移除 action 属性，并在 JS 中显式阻止事件（推荐进阶写法）：

   <form id="calcForm">
     <!-- 表单内容不变 -->
   </form>

   document.getElementById('calcForm').addEventListener('submit', function(e) {
     e.preventDefault(); // 关键：阻止默认提交
     Calculate();
   });

⚠️ 额外重要提醒（安全与健壮性）：

• 避免使用 eval()：当前代码 eval('var r =' + n1 + op + n2) 存在严重安全风险（如注入恶意运算符）且可读性差。应改用条件分支或 switch：

  let r;
  switch(op) {
    case '+': r = n1 + n2; break;
    case '-': r = n1 - n2; break;
    case '*': r = n1 * n2; break;
    case '/': r = n2 !== 0 ? n1 / n2 : NaN; break;
    default: return;
  }

• 增强输入校验：parseFloat() 对空字符串返回 NaN，需检查 isNaN(n1) 或 n1 === ''，避免无效计算。
• disabled 输入框无法提交，但可正常显示：当前 #res 使用 disabled 是合理的（用户不应手动编辑结果），无需改为 readonly。

综上，修复核心仅需一行修改（action="javascript:void(0)"），但结合安全计算、事件规范处理与输入防护，才能构建真正可靠、可维护的前端计算器。