Javascriptを使って簡単なストップウオッチを作る➄

Javascriptを使って簡単なストップウオッチを作る

ストップウオッチを作ってみよう➄

バグを見つけて直しましょう。

ボタンをいじっていると以下のような変な動きが現れることがあります。

・スタートを2回押してしまうと、１にもどったり途中までのが進んだり入り混じってしまう。。。

・たまにストップを押しても止まらないときがある。

・リロードすると直る

対策としては・・・

タイマーが動いているときにスタートボタンを押しても何もしない。

タイマーが止まっているときにストップボタン押しても何もしない。

コードの言葉で表すと・・・

もし変数timerがnullならば、startButtonのクリックが動作する。*1

もし変数timerがnullでないならば、stopButtonのクリックが動作する。*2

動作を整理して図で表すと・・・

アプリケーション状態	変数timerの値	スタートボタン動作	ストップボタン動作
初期状態	null	カウントアップ開始*1	何もしない。
カウントアップ状態	intervalIDとして扱われた数値	何もしない。	停止する*2
停止状態	null	カウントアップ開始*1	何もしない。

赤字が今回追記したコードです。

ストップウォッチ

JavaScript var displayElm = document.getElementsByClassName(‘display’)[0];
var timer = null;
var startButton = document.getElementsByClassName(‘startButton’)[0];
startButton.addEventListener(‘click’, function(){
if(timer === null){
displayElm.innerHTML = seconds;
var seconds = 0;
timer = setInterval(function(){
seconds++;
},1000);
}
});

var stopButton = document.getElementsByClassName(‘stopButton’)[0];
stopButton.addEventListener(‘click’, function(){
if(timer !== null){
clearInterval(timer);
timer = null;
}
});

解説

var displayElm = document.getElementsByClassName(‘display’)[0];	HTMLのドキュメントからdisplayというクラスがついている要素を全て取得し、「0」で取得した配列の一番初めの要素を取り出す。それを変数displayElmに代入します。
var timer = null;	intervalIDの数値を入れておくための変数timerを用意します。
var startButton = document.getElementsByClassName(‘startButton’)[0];	HTMLのドキュメントからstartButtonというクラスがついている要素を全て取得し、「0」で取得した配列の一番初めの要素を取り出す。それを変数startButtonに代入します。
startButton.addEventListener(‘click’, function(){～	取り出したstartButtonに対してクリックイベントのリスナを指示する
if(timer === null){～　}	もしtimer変数がnullならば、startButtonのクリックが動作する
displayElm.innerHTML = seconds;	先に変数定義したdisplayElmからinnerHTMLを呼び出し、それを秒数の数字とするsecondsとさせ数字を変更します。
var seconds = 0;	変数secondsを定義し、それを0とし、1秒ごとに加算されるようにする。
timer =setInterval(function(){	一定時間ごとに処理を繰り返す setIntervalを使います。第一引数の関数内容を、第二引数の時間間隔で何度も呼び出します。そして戻り値を変数timerに代入しておくことでintervalIDを持ち続けるようにします。
seconds++;	1つずつ加算されるようにする。
},1000);	第二引数はミリ秒単位なので、1000と指定して1秒ごとに呼び出されるように指示します。
var stopButton = document.getElementsByClassName(‘stopButton’)[0];	HTMLのドキュメントからstoptButtonというクラスがついている要素を全て取得し、「0」で取得した配列の一番初めの要素を取り出す。それを変数stopButtonに代入します。
stopButton.addEventListener(‘click’, function(){	取り出したstopButtonに対してクリックイベントのリスナを指示する
if(timer !== null){～　}	もしtimer変数がnullでないならば、stopButtonのクリックが動作する。
clearInterval(timer);	clearIntervalをtimerに適用する
timer = null;	停止したときにtimer変数に初期状態のnullを代入します。

この本から引用、参考にして学び、完成させることができました。しかし、ここではプログラミング初心者の私が詳しく解説することは、おこがましく、難しく出来ません（ToT）
その点、この本では丁寧な解説が載っていますので、解説とともにコードを書き、完成させればより深く学ぶことができます(^.^)、実際、初心者の私でもわかりやすかったです。身に付け消えないスキルが3,000円弱ならコスパよく、買っておいてよかったと満足してます。

わからないことはプロフェッショナルから学ぶのが一番

キャリアアップに必要なスキルを取得しよう。

オンラインで受講ができるスクールですので、全国どこからでも。