BMI计算器校验功能正常但计算功能失效 代码问题排查求助

已发现的错误点 #

• calBMI函数中调用getElementById方法时遗漏了宿主对象document，浏览器无法识别该全局方法会直接报错
• 只读输入框是input元素，不能用innerHTML赋值，必须使用value属性写入内容
• 提交按钮为submit类型，点击后会触发表单默认提交行为刷新页面，导致计算结果刚生成就被刷新清除
• 按钮的onclick事件中多个函数调用未加分号分隔，存在语法错误，且validate函数内已经调用了calBMI，此处重复调用属于冗余逻辑
• 身高校验的提示文本存在拼写错误：heught应为height
• 读取到的体重、身高值为字符串类型，未做数值转换直接运算可能出现异常

修正后的完整代码 #

JS代码 #

function validate() {
  if (document.myForm.weight.value == "") {
    alert("请输入您的体重！");
    document.myForm.weight.focus();
    return false;
  }
  if (document.myForm.height.value == "") {
    alert("请输入您的身高！");
    document.myForm.height.focus();
    return false;
  }
  calBMI();
  // 阻止表单默认提交刷新页面
  return false;
}
function calBMI() {
  // 转换为数值类型再运算
  var weight = parseFloat(document.getElementById("weight").value);
  var height = parseFloat(document.getElementById("height").value);
  var bmi = weight / (height * height);
  // 保留两位小数优化展示效果，用value赋值给input元素
  document.getElementById("bmi").value = bmi.toFixed(2);
}

HTML代码 #

<body>
  <form name="myForm">
    <label>体重（单位：千克）</label>
    <input type="text" name="weight" id="weight">
    <label>身高（单位：米）</label>
    <input type="text" name="height" id="height">
    <input type="text" readonly="readonly" id="bmi">
    <!-- 修正onclick写法，添加return接收validate的返回值阻止表单提交 -->
    <input type="submit" value="计算BMI" onclick="return validate()">
  </form>
</body>

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