如何实现BMI计算器的if-else判定结果显示在结果输入框下方并解决界面消失问题？

让我们一步步搞定你的问题：

核心问题拆解 #

1. document.write()搞没了整个界面：页面加载完成后调用document.write()会直接清空当前文档，重新写入内容，这就是点击按钮后计算器消失的元凶——绝对不能用它来更新页面内容！
2. BMI计算公式写反了：正确的BMI公式是「体重(kg) ÷ (身高(m)的平方)」，你写成了w²/h，结果完全不对。
3. 条件判断有语法错误：bmi => 22.5是无效写法，正确的大于等于运算符是>=。
4. 分类逻辑和通用标准不符：你的肥胖/超重划分和常规标准有出入，我会帮你调整成通用版本（也可以按需改回你的数值）。

修正后的完整代码 #

HTML部分

我们在answer输入框下方加一个<div>，专门用来显示判定结论：

<form>
  Height (m):<br>
  <input type='number' id='height' size='20px' step="0.01"><br>
  Weight (kg):<br>
  <input type='number' id='weight' size='20px' step="0.1">
  <br><br>
  <hr>
  <input type='button' onclick='bodyMassIndex()' value='Get BMI' height='20px' width='100px'>
  <br><br>
  BMI Result:<br>
  <input type='text' id='answer' size='20px' readonly>
  <!-- 新增的判定结果展示区 -->
  <div id="resultNote" style="margin-top:8px; font-weight:bold;"></div>
</form>

JavaScript部分

修正公式、替换document.write()为DOM元素更新，同时补全输入验证：

function bodyMassIndex() {
  // 获取输入值并转为数字类型
  const height = parseFloat(document.getElementById("height").value);
  const weight = parseFloat(document.getElementById("weight").value);

  // 先验证输入是否有效
  if (isNaN(height) || isNaN(weight) || height <= 0 || weight <= 0) {
    document.getElementById("answer").value = "";
    document.getElementById("resultNote").textContent = "请输入有效的身高和体重！";
    return;
  }

  // 正确计算BMI，保留两位小数
  const bmi = weight / (height * height);
  document.getElementById("answer").value = bmi.toFixed(2);

  // 判断BMI类别
  let resultMsg;
  if (bmi <= 18.5) {
    resultMsg = "You are underweight";
  } else if (bmi > 18.5 && bmi <= 24.9) {
    resultMsg = "You are healthy";
  } else if (bmi > 24.9 && bmi <= 29.9) {
    resultMsg = "You are overweight";
  } else {
    resultMsg = "You are obese";
  }

  // 将判定结果写入新增的div
  document.getElementById("resultNote").textContent = resultMsg;
}

关键修改说明 #

• 用parseFloat()确保输入是数字，避免字符串运算出错
• 增加输入有效性验证，防止用户填非数字或负数
• 用textContent更新指定元素内容，不会破坏原有页面结构
• 修正BMI计算公式，保留两位小数让结果更直观
• 给answer输入框加readonly，防止用户手动修改计算结果
• 调整了BMI分类为通用标准，你可以根据需求自行修改数值区间

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