点击提交/计算按钮后表单数据清空，结果无法稳定显示求助

兄弟，你这问题我碰过好多次了——罪魁祸首就是表单的默认提交行为！当你点击表单里的按钮（尤其是没指定type的<button>或者<input type="submit">）时，浏览器会自动触发表单的提交动作，导致页面刷新，所有表单数据被清空，刚计算出来的结果自然也就一闪而过，只能在地址栏和只读框里短暂瞥见。

给你两个简单有效的解决方案：

方案一：阻止表单的默认提交行为 #

在你的计算按钮的点击事件处理函数里，添加一行代码阻止默认行为：

function calculate(event) {
  // 先阻止表单默认提交，避免页面刷新
  event.preventDefault();
  
  // 下面放你的计算逻辑代码
  // ...
}

别忘了在HTML里给按钮绑定事件时传递event参数：

<button onclick="calculate(event)">计算</button>

方案二：修改按钮类型为button #

如果你的按钮是<button>标签，它的默认类型是submit，直接把类型改成button，就能彻底避免触发表单提交：

<button type="button" onclick="calculate()">计算</button>

这样点击按钮只会执行你写的计算逻辑，不会刷新页面，数据和结果都会稳稳留在页面上。

你可以试试这两种方法，基本都能解决你的问题！

内容的提问来源于stack exchange，提问作者Spencer-Gre