JavaScript问题：BMI计算器计算结果显示后立即消失

嘿，我一眼就看出问题所在啦！你的按钮放在<form>元素里，点击它的时候浏览器会默认触发表单提交行为，页面一刷新，刚计算好的BMI值当然就瞬间没啦😅。

给你几个简单的解决办法，选一个就能搞定：

方法1：修改按钮类型为button #

这是最直接的方式，把按钮的默认类型改掉，让它不再触发表单提交：

<button type="button" onclick="calcbmi()">Calc BMI</button>

方法2：在点击事件里阻止默认行为 #

如果不想改按钮类型，也可以手动阻止浏览器的默认提交动作：

方式A：直接在onclick里返回false #

<button onclick="calcbmi(); return false;">Calc BMI</button>

方式B：在函数内部阻止事件 #

修改你的JavaScript函数，加上阻止默认行为的代码：

function calcbmi(event){
  // 阻止表单提交的默认动作
  event.preventDefault();
  var w=parseInt(document.getElementById('wtxt').value);
  var h=parseInt(document.getElementById('htxt').value);
  var z=w/(h*h);
  document.getElementById('bmitxt').value=z;
}

对应的按钮需要传事件参数：

<button onclick="calcbmi(event)">Calc BMI</button>

方法3：移除<form>标签（如果不需要表单功能） #

如果你的页面只用到表单的重置功能，完全可以直接删掉<form>和</form>标签——没有表单就不会触发提交刷新啦。

最后给你一个完整的修改后代码示例（用方法1，最简单省心）：

<!DOCTYPE html> 
<html> 
<head> 
  <title>BMI Calculator</title> 
</head> 
<body> 
  <form> 
    Weight:-<input type="text" id="wtxt"><br> 
    Height:-<input type="text" id="htxt"><br> 
    BMI:-<input type="text" id="bmitxt"><br> 
    <input type="reset" value="clear"><br> 
    <button type="button" onclick="calcbmi()">Calc BMI</button> 
  </form> 
  <script type="text/javascript"> 
    function calcbmi(){ 
      // 换成parseFloat支持小数输入，更准确
      var w=parseFloat(document.getElementById('wtxt').value); 
      var h=parseFloat(document.getElementById('htxt').value); 
      var z=w/(h*h); 
      document.getElementById('bmitxt').value=z; 
    } 
  </script> 
</body> 
</html>

顺便提一句：你现在用parseInt处理身高体重，要是用户输入小数会被截断，换成parseFloat会更准确哦！

内容的提问来源于stack exchange，提问作者Chanuka Gayantha