BMI計算：JavaScript学習

9906 ワード
JavaScript JavaScript テキストリンク

経緯

今までノリで書いていたjsを基本から勉強しようと思ったから。
復習にもなると思ったのでQiitaに投稿してみました。

コード内容

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <style>
        #yase {
            color: blue;
            font-size: 30px;
            border-bottom: solid 3px;
        }
        #himan {
            color: red;
            font-size: 30px;
            border-bottom: solid 3px;
        }
        #hyojyun {
            color: green;
            font-size: 30px;
            border-bottom: solid 3px;
        }
    </style>
    <script>
        function calcBMI() {
            var a = document.getElementById("i0").value;
            var b = document.getElementById("i1").value;
            var num1 = parseFloat(b / (a * a));
            var num2 = num1 * 10;
            var bmi = Math.ceil(num2) / 10;

            if (bmi < 18.5) {
                document.getElementById("yase").textContent = "痩せ";
            } else if (bmi >= 25) {
                document.getElementById("himan").textContent = "肥満";
            } else if (bmi >= 18.6 && bmi < 25) {
                document.getElementById("hyojyun").textContent = "標準";
            }

            document.getElementById("bmi").textContent = bmi;
        }
    </script>
</head>

<body>
    <h2>BMI計算機</h2>
    身長(m)⇒<input id="i0" value="" /><br>
    体重(㎏)⇒<input id="i1" value="" /><br><br>
    <button onclick="calcBMI()">check</button><br><br>
    <span>あなたのBMIは</span><span id="bmi"></span><span>です。</span>
    <p><span>判定は・・・</span><span id="yase"><span id="himan"><span id="hyojyun"></span></p>
</body>

</html>

苦労したところ

◆小数点の位置と切り上げ

//小数点数に変換
var num1 = parseFloat(b / (a * a));

//小数点第1位を基準にするための処理
var num2 = num1 * 10;

// 切り上げのceilメソッドを使う
var bmi = Math.ceil(num2) / 10;

実際の画面


以下、ボタン押下後。

これから

DOM操作、コールバック関数について学習を進めていきたい。

参考文献・サイト

🎨 HTMLとCSSを使用してTwitterのプロフィールホバーカードを作成する方法
URL