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

该问题源于表单提交（`

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

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

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

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

   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)”），但结合安全计算、事件规范处理与输入防护，才能构建真正可靠、可维护的前端计算器。