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

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>BMI測定</title>
</head>
<body>
身長(cm):<input type="number" step="0.1" id="height"><br>
体重(kg):<input type="number" step="0.1" id="weight"><br>
<button id="calc" onclick="calc()">計測</button>
<div id="result"></div>
<script>
'use strict';
var eleHeight=document.getElementById("height");
var eleWeight=document.getElementById("weight");
var result=document.getElementById("result");
function calc(){
	var height=parseFloat(eleHeight.value);
	height/=100;
	var weight=parseFloat(eleWeight.value);
	var bmi=weight/(height*height);
	var judge;
	if(bmi>=40){
		judge='肥満4';
	}else if(bmi >=35){
		judge='肥満3';
	}else if(bmi >=30){
		judge='肥満2';
	}else if(bmi >=25){
		judge='肥満1';
	}else if(bmi >=18.5){
		judge='普通体重';
	}else{
		judge='低体重';
	}
	result.innerHTML='BMI:'+bmi.toFixed(2)+"<br>"+judge+'です。';


}
</script>
</body>
</html>

コメント