如何修复下拉选择计算器中结果值被重置的问题

碧海醫心 2026-01-24 00:00:00 次阅读

html 表单默认提交会刷新页面并清空动态计算结果，只需将 form 的 `action` 属性设为 `"javascript:void(0);"` 即可阻止默认提交行为，使 javascript 计算结果稳定显示在输出框中。

在初学 JavaScript 与 HTML 表单交互时，一个常见陷阱是：表单提交（submit）会触发页面刷新，导致所有通过 JS 动态设置的值（如计算结果）瞬间丢失。你遇到的“结果输入框值被重置为空”问题，根本原因正是

标签中设置了 action="eval.html" —— 浏览器会在点击 = 按钮（类型为 type="submit"）时尝试提交表单并跳转/刷新，覆盖了刚写入 document.getElementById('res').value = r 的结果。

✅ 正确解法：禁用表单默认提交行为

最简洁安全的方式是将 action 设为 javascript:void(0);，它不执行任何操作且不会触发导航或刷新：

⚠️ 注意事项：

不要使用 action="#"（可能引起页面跳转到顶部）；
避免在生产环境使用 eval()（存在严重安全与性能风险），推荐改用 switch 或对象映射实现运算逻辑；
onchange 在

? 改进后的推荐代码（含安全性增强）：

? 总结：表单中 action 属性是“罪魁祸首”，而非 JS 赋值逻辑本身；掌握 return false 或 event.preventDefault() 阻止默认行为，是前端交互开发的基石技能。后续可进一步封装为模块化函数、添加错误提示和键盘支持（如 Enter 键触发计算），让计算器更健壮易用。