<JavaScript>来場者カウンター作ってみたPart.2

制作物の目的(前回)
制作物の概要(前回)
制作物の完成形(前回)
制作したコード(html)(前回)
制作したコード(JavaScript)
- 機能1:人数カウント機能(今回)
- 機能2:トータル人数算出機能(今回)
- 機能3:時間ごと人数統計表示機能

ということで今回からは本格的にJavaScriptの事書いていきます

人数入力関連

人数カウント機能

//保護者のカウントボタン
var count_parent = function (lev) {
    //現状の数値を取得する
    var num = parseInt(document.getElementById('num_parent').innerHTML);
    //増減の情報を取得
    var trig = lev.getAttribute('id');
    //0でかつ減算のときは処理しない
    if (num == 0 && trig == "pdown") {
    } else if (trig == "pup") {
        //加算のときの処理
        //もとの値に加算して表示を切り替え
        num = num + 1;
        document.getElementById('num_parent').innerHTML = num;
    } else if (trig == "pdown") {
        //減算のときの処理
        //もとの値に減算して表示を切り替え
        num = num - 1;
        document.getElementById('num_parent').innerHTML = num;
    }
}

上のコードは中学生以外のカテゴリの処理です
中学生についての処理もほぼ変わらないのでそっちのコードは省略します。
変わったところはgetElementByIdのところが中学生の要素に合わせた変数になってます
このスクリプトをbutton要素のonclickイベントをトリガにして実行します。

リセット用スクリプト

//入力のリセットボタン
var reset_num = function () {
    //中学生以外のカウントを0に戻す
    document.getElementById('num_parent').innerHTML = 0;
    //中学生のカウントを0に戻す
    document.getElementById('num_student').innerHTML = 0;
}

これは中学生以外と中学生で共通しています
これもonclickをトリガにしています

トータル人数算出機能

//トータルへの追加
var add_total = function () {
    //中学生以外のカウントを取得する
    var pnum = parseInt(document.getElementById('num_parent').innerHTML);
    //中学生のカウントを取得する
    var snum = parseInt(document.getElementById('num_student').innerHTML);
    //中学生以外のトータルを取得する
    var total_p = parseInt(document.getElementById('parent_total').innerHTML);
    //中学生以外のトータルを取得する
    var total_s = parseInt(document.getElementById('student_total').innerHTML);
    //中学生以外のトータルにカウントを加算する
    total_p = total_p + pnum;
    //中学生のトータルにカウントを加算する
    total_s = total_s + snum;
    //中学生以外のトータルを表示
    document.getElementById('parent_total').innerHTML = total_p;
    //中学生のトータルを表示
    document.getElementById('student_total').innerHTML = total_s;
    //入力をリセットする
    document.getElementById('num_parent').innerHTML = 0;
    document.getElementById('num_student').innerHTML = 0;
}

コメントに書いてあるとおりの処理の流れで動いてます
ここまではまだ変なことしてないのでこういった形で本日は終了