完成形のイメージ

日本人の平均男性が80歳ぐらいまで生きると想定し、
自分の年齢を入力して余生を日数ではなく時間単位でカウントダウン表示する

実装したい機能を言葉にしよう

今回考えなければならないは
"自分の年齢と睡眠時間を選択した際に選択した値をどうやって表示するか"

実装したい機能を細かくブレークダウンする

"自分の年齢と睡眠時間を選択した際に選択した値を時間単位で表示する"機能は、
以下のように細かく分けられる。

1 : プルダウンメニューを作る
2 : プルダウンメニューから選択した値を取得
3 : 取得した値を画面に出力
4 : 出力形式を調整(100000時間なら100000:00:00:000てな感じかな。)
etc....

今日の課題はプルダウンメニューを作る -> プルダウンメニューから選択した値を取得

htmlファイルに以下のように記述。

life_timer.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charaset="utf-8">
<title>LIFE TIMER</title>
</head>
<body>
    <div id="timer">00:00:000</div>
    <div id="controls">
        <button id="min">Min</button>
        <button id="sec">Sec</button>
        <button id="reset">Reset</button>
        <button id="start">Start</button>

        <p>年齢を選択してください</p>
        <select id="age">Age</select>    <- こいつと
        
        <p>一日の睡眠時間を選択してください</p>
        <select id="sleep"></select>　　　　　　　　　　<- こいつ
    </div>
    <script src="life_timer.js"></script>
</body>

</html>

javascriptでプルダウンメニューと選択した値の情報を変数で保持

ちなみにalertで選択した値を出力するようにしています。

life_timer.js

 //年齢を選択する時に発火する関数
    setAgeNumber();

    function setAgeNumber(){
        for(var i = 10; i <= 80; i ++){
            var option = document.createElement("option");
            option.value = i;
            option.innerText = i;
            Age.appendChild(option);
        }
    }

    //年齢を選択するプルダウンメニューを変更したら発火
    Age.addEventListener('change',function(){
        var ageValue = document.getElementById("age").value;
        alert(ageValue);
    });


    //睡眠時間を選択する際に発火する関数
    setSleepNumber();

    function setSleepNumber(){
        for(var i = 1; i <= 24; i++){
            var option = document.createElement("option");
            option.value = i;
            option.innerText = i;
            Sleep.appendChild(option);
        }
    }

    //睡眠時間を選択するプルダウンメニューを変更したら発火
    Sleep.addEventListener('change',function(){
        var sleepValue = document.getElementById("sleep").value;
        alert(sleepValue);
    });

課題

明日は、
"取得した値を画面に出力"
に挑戦です。