Webサイト制作-(BMIアプリの作成)

JSを使ってBMI測定アプリを作成しよう。
[実行例]
フォーム表示

身長と体重を入力して計測ボタンを押すと結果が表示される。

なおBMIは
体重kg/(身長m*身長m)
で求められ
判定基準は以下とする。
18.5未満　低体重
18.5～25未満普通
25～30未満肥満（1度）
30～35未満肥満（2度）
35～40未満肥満（3度）
40以上肥満（4度）

[作例]

●index.html

01<!DOCTYPE html>
02<html>
03<head>
04  <meta charset="UTF-8">
05  <title>BMIApp</title>
06</head>
07<body>
08  身長(cm):<input type="number" id="height" step="0.1"><br>
09  体重(kg):<input type="number" id="weight" step="0.1"><br>
10  <button id="calcBt" onclick="calc()">計測</button>
11  <div id="result"></div>
12  <div id="msg"></div>
13<script>
14  const hDom=document.getElementById("height");
15  const wDom=document.getElementById("weight");
16  const resultDom=document.getElementById("result");
17  const msgDom=document.getElementById("msg");
18  const calc=()=>{
19    let h=parseFloat(hDom.value)/100;
20    let w=parseFloat(wDom.value);
21    let bmi=w/(h*h);
22    resultDom.textContent=`BMI:${bmi.toFixed(2)}`;
23    let msg;
24    if(bmi < 18.5){
25      msg="低体重";
26    }else if(bmi < 25){
27      msg="普通体重";
28    }else if(bmi < 30){
29      msg="肥満(1度)";
30    }else if(bmi < 35){
31      msg="肥満(2度)";
32    }else if(bmi < 40){
33      msg="肥満(3度)";
34    }else{
35      msg="肥満(4度)";
36    }
37    msgDom.textContent=msg+"です";
38  }
39</script>
40</body>
41</html>