<h1>BMI 計算機</h1>
<div class="inputData">
  <label for="bodyHeight">身高</label>
  <input type="number" id="bodyHeight" min="0">公分
  <label for="bodyWeight">體重</label>
  <input type="number" id="bodyWeight" min="0">公斤
</div>

<input type="submit" value="計算" onclick="getBody()">

<h2>BMI值：</h2>
<p id="calResult"></p>
<span id="bmiResult"></span>
function getBody() {
  var height = document.querySelector("#bodyHeight").value;
  var weight = document.querySelector("#bodyWeight").value;
  var calResult = document.querySelector("#calResult");
  var bmiResult = document.querySelector("#bmiResult");

  if (bmiCal(height, weight) > 24) {
    bmiResult.textContent = "過胖";
  } else if (bmiCal(height, weight) < 18.5) {
    bmiResult.textContent = "過瘦";
  } else {
    bmiResult.textContent = "正常";
  }
  
//   判斷是否輸入資料，如果有就可以顯示計算結果，沒有的話就跳 alert
  if (height !== "" && weight !== "") {
    calResult.textContent = bmiCal(height, weight);
  } else {
    alert("請輸入資料");
  }
}

function bmiCal(height, weight) {
  var h = parseInt(height) / 100;
  var w = parseInt(weight);
  return (w / (h * h)).toFixed(1);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.