BMIWeb測定アプリを開発しました。
以下テストで実装したコードです。
改良版は適宜記事にいたします。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>健康アプリWebアプリ</title>
<style>
#answer {
width:200px;
margin-top:20px;
color:#000;
background-color: #FFF;
}
#res {
margin-top:40px;
width:500px;
color:#F00;
background-color: #5EF;
font-size:30px;
font-weight:bold;
}
#calc {
width:120px;
height:40px;
color:#3791C4;
background-color: #F7C806;
border-radius: 1px #000;
margin-top:20px;
}
</style>
</head>
<body>
<script>
function setcalc(myForm){
var w_h = Number(myForm.height.value);
var w_w = Number(myForm.weight.value);
var result = w_w / ((w_h / 100) * (w_h / 100));
return result;
}
</script>
<form name="weight form" id="form1">
<label>身長を入力してください。cmで記入</label><br>
<input type="text" name="height" id="height"><br>
<label>体重を入力してください。kgで記入</label><br>
<input type="text" name="weight" id="weight"><br>
<input type="button" id="calc" name="calc" value="計算する">
</form>
<div id="answer">
BMI値を表示
</div>
<div id="res">
判定を表示
</div>
<script>
const height = document.getElementById('height');
const weight = document.getElementById('weight');
const form1 = document.getElementById('form1');
const calc = document.getElementById('calc');
const answer = document.getElementById('answer');
const res = document.getElementById('res');
var value;
calc.addEventListener('click',function(){
value = setcalc(this.form);
answer.textContent = Math.floor(value);
hantei1(value);
},false);
function hantei1(value1){
if(value1 < 18){
res.textContent = "痩せ過ぎです";
} else if (value1 < 25){
res.textContent = "普通体重です";
} else if (value1 < 30){
res.textContent = "肥満１度です";
} else if (value1 < 35){
res.textContent = "肥満２度です";
} else if (value1 >= 35){
res.textContent = "太りすぎです";
}
}
</script>
</body>
</html>