html 表单默认提交会刷新页面并清空动态计算结果，只需将 form 的 `action` 属性设为 `"javascript:void(0);"` 即可阻止默认提交行为，使 javascript 计算结果稳定显示在输出框中。
在初学 JavaScript 与 HTML 表单交互时，一个常见陷阱是：表单提交（submit）会触发页面刷新，导致所有通过 JS 动态设置的值（如计算结果）瞬间丢失。你遇到的“结果输入框值被重置为空”问题，根本原因正是 <form> 标签中设置了 action="eval.html" —— 浏览器会在点击 = 按钮（类型为 type="submit"）时尝试提交表单并跳转/刷新，覆盖了刚写入 document.getElementById('res').value = r 的结果。
✅ 正确解法：禁用表单默认提交行为
最简洁安全的方式是将 action 设为 javascript:void(0);，它不执行任何操作且不会触发导航或刷新：
<form action="javascript:void(0);" method="get">
⚠️ 注意事项：
- 不要使用 action="#"（可能引起页面跳转到顶部）；
- 避免在生产环境使用 eval()（存在严重安全与性能风险），推荐改用 switch 或对象映射实现运算逻辑；
- onchange 在 <select> 上触发计算是合理的，但 onclick 在 submit 按钮上也调用 Calculate() 是冗余的——更佳做法是统一绑定 onsubmit="Calculate(); return false;" 到 form 标签，既覆盖所有提交入口，又显式阻止默认行为。
? 改进后的推荐代码（含安全性增强）：
<form style="border: 2px blue solid; padding: 2px; background-color: blueviolet"
onsubmit="Calculate(); return false;">
<input type="number" id="n1" name="N1" value="1" step="0.001" />
<select id="op">
<option value="+">+</option>
<option value="-">−</option>
<option value="*">×</option>
<option value="/">÷</option>
</select>
<input type="number" id="n2" name="N2" value="2" step="0.001" />
<input type="submit" value="=" />
<input type="number" id="res" name="Res" step="0.001" disabled />
</form>
<script>
function Calculate() {
const n1 = parseFloat(document.getElementById('n1').value) || 0;
const n2 = parseFloat(document.getElementById('n2').value) || 0;
const op = document.getElementById('op').value;
let result;
switch (op) {
case '+': result = n1 + n2; break;
case '-': result = n1 - n2; break;
case '*': result = n1 * n2; break;
case '/': result = n2 !== 0 ? n1 / n2 : NaN; break;
default: result = NaN;
}
document.getElementById('res').value = isNaN(result) ? '' : result;
}
</script>? 总结：表单中 action 属性是“罪魁祸首”，而非 JS 赋值逻辑本身；掌握 return false 或 event.preventDefault() 阻止默认行为，是前端交互开发的基石技能。后续可进一步封装为模块化函数、添加错误提示和键盘支持（如 Enter 键触发计算），让计算器更健壮易用。
