<JavaScript>来場者カウンター作ってみたPart.2
poolbooyer.hatenablog.jp
こいつの第二弾です
- 制作物の目的(前回)
- 制作物の概要(前回)
- 制作物の完成形(前回)
- 制作したコード(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; }
コメントに書いてあるとおりの処理の流れで動いてます
ここまではまだ変なことしてないのでこういった形で本日は終了