LoginSignup
2
1

More than 1 year has passed since last update.

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 = "肥満1度です";
      } else if (value1 < 35){
        res.textContent = "肥満2度です";
      } else if (value1 >= 35){
        res.textContent = "太りすぎです";
      }
    }
  </script>

  
</body>
</html>
2
1
3

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
1