ストップウォッチのカウント機能がうまく作動しない

いつもお世話になってます。
javascript初学者です。
現在、簡易的なストップウォッチを作成してます。

ストップウォッチ機能

・startボタンをクリックしたら計測スタート
・stopボタンで一時停止、startボタンを押すと計測再開
・resetボタンを押した時に初期値（0.0）に戻る

今、困っていること

startボタンを押したらカウントが開始されます。
stopボタンを押したらカウントは止まります。
しかし、再度startボタンを押してカウントを再開させようとしたところ、何故か初期値（0.00）に戻ってカウントされてしまいます。

発生している問題・エラーメッセージ

特になし

該当のソースコード

HTML
1<html>
2  <head>
3    <meta charset="utf-8" />
4    <title>ストップウォッチ｜1秒単位で計測</title>
5    <style>
6      * {
7        margin: 0;
8        padding: 0;
9        border: 0;
10        font-size: 50px;
11        font-display: sans-serif;
12      }
13
14      body {
15        background-color: rgb(162, 237, 238);
16        text-align: center;
17        margin: 0 auto;
18      }
19
20      h1 {
21        font-size: 40px;
22        margin: 40px;
23      }
24
25      #timer {
26        margin-bottom: 20px;
27      }
28
29      .myButton {
30        font-size: 25px;
31        margin: 5px;
32        padding: 5px;
33        border-radius: 5px;
34      }
35    </style>
36  </head>
37
38  <body>
39    <h1>ストップウォッチ｜1秒単位で計測</h1>
40    <div id="timer">0.00</div>
41    <input type="button" class="myButton" value="start" onClick="start();" />
42    <input type="button" class="myButton" value="stop" onClick="stop();" />
43    <input type="button" class="myButton" value="reset" onClick="reset();" />
44
45    <script type="text/javascript" src="test.js"></script>
46    <!--
47    <script type="text/javascript" src="191103.js"></script>
48    -->
49  </body>
50</html>
51

javascript
1var startTime = 0;
2var stopTime = 0;
3var timerId;
4var stopCalc = 0;
5
6function start() {
7  startTime = Date.now();
8  CountTime();
9}
10
11function stop() {
12  clearTimeout(timerId);
13  stopCalc += Date.now() - startTime;
14}
15
16function reset() {
17  var resetText = document.getElementById("timer");
18  resetText.textContent = "0.00";
19}
20
21function CountTime() {
22  timerId = setTimeout(function() {
23    var CountTimeCalc = Date.now() - startTime + stopTime;
24    var CountTimeText = document.getElementById("timer");
25    CountTimeText.textContent = (CountTimeCalc / 1000).toFixed(2);
26    CountTime();
27  }, 100);
28}

試したこと①

CountTime関数でstartボタンを押した時とstopボタンを押した時の時間を計算処理してます。
stop関数の計算処理方法が間違っているのかそもそもこのロジックが間違っているのか自分では判断できないので困ってます。ご教示の程よろしくお願いします。

javascript
1//CountTime関数
2function CountTime() {
3  timerId = setTimeout(function() {
4    var CountTimeCalc = Date.now() - startTime + stopTime;
5    var CountTimeText = document.getElementById("timer");
6    CountTimeText.textContent = (CountTimeCalc / 1000).toFixed(2);
7    CountTime();
8  }, 100);
9}

試したこと②

stop関数に下記のコードを追記するとstopボタンを押した後にstartボタンを押すとカウントが再開できるようになりました。
しかし、今度はstartボタンからresetボタンを押したら何故か初期値（0.0）に戻らなくなりました。
ご指摘頂いたstart関数についてもう少し検証していきたいと思います。

javascript
1//stop関数
2function stop() {
3　//追加したコード
4  stopTime += Date.now() - startTime;
5  clearTimeout(timerId);
6}

行動規範の内容に同意します

回答3件

ベストアンサー

こんな感じでは？

javascript
1<script>
2window.addEventListener('DOMContentLoaded', ()=>{
3  var startTime = 0;
4  var stopTime = 0;
5  var timerId;
6  const timer = document.querySelector('#timer');
7  const start=document.querySelector('#start');
8  const stop =document.querySelector('#stop');
9  const reset=document.querySelector('#reset');
10  const setButtonDisabled=flg=>{
11    start.disabled=flg;
12    stop.disabled=!flg;
13    reset.disabled=flg;
14  };
15  start.addEventListener('click',()=>{
16    setButtonDisabled(true);
17    startTime = Date.now()-stopTime;
18    timerId = setInterval(()=>{
19      stopTime = Date.now() - startTime;
20      timer.textContent = (stopTime / 1000).toFixed(2);
21    }, 100);
22  });
23  stop.addEventListener('click',()=>{
24    clearTimeout(timerId);
25    setButtonDisabled(false);
26  });
27  reset.addEventListener('click',()=>{
28    timer.textContent = "0.00";
29    stopTime = 0;
30  });
31});
32</script>
33<h1>ストップウォッチ｜1秒単位で計測</h1>
34<div id="timer">0.00</div>
35<input type="button" id="start" value="start">
36<input type="button" id="stop"  value="stop" disabled>
37<input type="button" id="reset" value="reset">

投稿2019/11/05 02:25

yambejp

総合スコア116694

hiroo_mokumoku

2019/11/09 14:53

今回のベストアンサーとさせていただきます。回答ありがとうございました。

行動規範の内容に同意します

start()を発火した際に、毎回

startTime = Date.now();

をしているのが原因だと思います。
start()を

if(startTime ==0){
startTime = Date.now()
}
CountTime();

とし、reset()を

startTime = 0
var resetText = document.getElementById("timer");
resetText.textContent = "0.00";

とすれば動くと思います。

投稿2019/11/04 08:06

YukiSaegusa

総合スコア35

hiroo_mokumoku

2019/11/04 08:11 編集

回答ありがとうございます。頂いたコードを試させていただくと同時に自分でももう少しうまくカウントされない原因を追求していきたいと思います。

kei344

2019/11/04 08:33

To: YukiSaegusaさんそう書くと、「計測再開」ではなく最初のスタート時からストップまでの秒数になりませんか？

YukiSaegusa

2019/11/04 08:41

すみません、その通りですね、、、

行動規範の内容に同意します

再度startボタンを押してカウントを再開させようとしたところ、何故か初期値（0.00）に戻ってカウントされてしまいます。

start関数内でstartTime = Date.now();しているからです。
継続したいのであれば、止まった時の秒数をどこかに持っておいて、それを足すようなロジックを組むとかする必要があります。

投稿2019/11/04 08:01

kei344

総合スコア69596

hiroo_mokumoku

2019/11/04 08:07 編集

早速の回答ありがとうございます。 >>止まった時の秒数をどこかに持っておいてつまり、止まった時の秒数用の「関数」もしくは「変数」を作成すれば良いという認識で合ってますか？

kei344

2019/11/04 08:36

「stopCalc」は何のためにとっているのでしょう。（もし何かのコードを参考にされているのであれば、出典を明らかにされたほうがよいです）

hiroo_mokumoku

2019/11/04 10:51 編集

>>「stopCalc」は何のためにとっているのでしょう。すみません、再度コードを見直したところstopCalcの処理は不要だと判明しました。なので、削除してます。ちなみにstopCalcの処理を行っていた理由はスタートボタンを押した時に計測される時間とストップボタンを押した時に計測される時間を算出したかったのでstopCalcを使用してました。

kei344

2019/11/04 11:22

出典もとのコードを確認してみてください、多分必要だから使用していると思いますよ。

行動規範の内容に同意します

あなたの回答