JavaScript でシンプルカウンターを作ってみよう

f:id:vw-dsg:20200601063255p:plain

～ JavaScript で作るシンプルカウンター～

今回は JavaScript でボタンを押すたびにカウントがアップする「シンプルカウンター」を作ります。

＜設計＞

今回作成するシンプルカウンターで使う部品は「カウント表示部」「カウントアップボタン」「リセットボタン」の3種類で、部品はdiv要素とbutton要素で作ります。

カウント表示部・・・div要素
カウントアップボタン・・・button要素
リセットボタン・・・button要素

動作・・・カウントアップボタンをクリックすると表示部のカウントが1ずつアップして、リセットボタンをクリックするとカウントが「0」に戻ります。

＜HTMLソース＞

HTMLでシンプルカウンターの部品（3つの要素）を用意します。

＜JavaScript コード＞

ポイントは、ページが読み込まれたらすぐに実行して、2つのボタンにイベントを登録するところです。最初にこの処理をしておかないとボタンをクリックしても反応してくれませんので、ぜひ忘れずに…。

// ページが読み込まれたら実行
window.onload = function() {

// オブジェクトと変数の準備
var count_disp = document.getElementById("disp_count");
var count_up_btn = document.getElementById("btn_count_up");
var reset_btn = document.getElementById("btn_reset");
   var count_value = 0;

// カウントアップボタンクリック処理
count_up_btn.onclick = function (){
   count_value += 1;
   count_disp.innerHTML = count_value;
};
// カウントアップボタンのマウスダウン処理
count_up_btn.onmousedown = function() {
   count_up_btn.style.backgroundColor = "#00FF00";
}
// カウントアップボタンのマウスアップ処理
count_up_btn.onmouseup = function() {
   count_up_btn.style.backgroundColor = "";
}
// リセットボタンのクリック処理
reset_btn.onclick = function (){
   count_value = 0; count_disp.innerHTML = count_value;
}
// リセットボタンのマウスダウン処理
reset_btn.onmousedown = function() {
   reset_btn.style.backgroundColor = "#00FF00";
}
// リセットボタンのマウスアップ処理
reset_btn.onmouseup = function() {
   reset_btn.style.backgroundColor = "";
}
};

＜CSS＞

CSSで表示とボタンのスタイルを設定します。

#disp_count {
background-color: #093;
color: #FFF;
font-size: 72px;
border-radius: 10px;
padding: 20px;
display: table-cell;
}

#btn_count_up {
font-size: 36px;
border-radius: 10px;
padding: 10px;
margin-top: 10px;
}

#btn_reset {
font-size: 36px;
border-radius: 10px;
padding: 10px;
margin-top: 10px;
}

#btn_count_up:hover { background-color:#F30 }
#btn_reset:hover { background-color:#F30 }