Untitled

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <title>BMI計算機</title>
    <script>
        // 事前準備
        // - ダウンロードZipを押す
        // - ダウンロードしたzipファイルを展開or解凍する
        // - 展開して得られたフォルダを開く
        // - このファイルをエディタとブラウザで開く

        // 課題1
        // 画面中の「タイトル」を「BMI計算機」に、
        // 「ボタン」を「計算する」に変更してください。
        // テキストエディタで変更を保存した後、ブラウザを再読み込みすると変更が反映されます。

        // 課題2
        // 身長ではなく、「あなたのBMIは～です」と表示するように変更してください。

        // 課題3
        // 小数ではなく、BMIを四捨五入した整数値を表示するように変更してください。
        // ヒント：「JavaScript 四捨五入」でググるといいです

        // 課題4
        // 身長が10cm以下ならば、「身長が変です」と表示してください。
        // 身長が変な場合はBMIは表示しないでください

        // 課題5
        // 名前の入力フォームを追加して「○○さんのBMIは～です」と表示するように変更してください

        // 超発展課題：ポップアップではなく、ページ上に計算結果が表示されるようにしてください

        function calcBmi() {
            // IDが「height」の要素の、値(value)を取得して、変数heightに代入する
            var h = document.getElementById('height').value
            var w = document.getElementById('weight').value
            var name = document.getElementById('name').value

            // 身長が小さすぎないかどうかチェック
            if (h <= 10) {
                document.getElementById('output').innerText = '身長が変です'
                return
            }

            var bmi = w / (h / 100) / (h / 100)
            var text = name + 'さんのBMIは' + Math.floor(bmi) + 'です'

            document.getElementById('output').innerText = text;
        }

    </script>
</head>

<body>
    <h1>BMI計算機</h1>
    <input type="text" id="height">
    <input type="text" id="weight">
    <input type="text" id="name">
    <button name="calc" id="calc" onclick="calcBmi()">計算する</button>

    <div id="output">計算結果</div>
</body>