javascript ストップウォッチを作る

###前提・実現したいこと
現在ドットインストールを見ながらストップウォッチを作成中です。しかし、今までうまく動いていたのに、急にボタンを押してもストップウォッチのスタートボタンを押しても秒数が動かなくなってしまいました。
作りかけの中途半端なコードですけれどもわかる方教えてください。
宜しくお願いします。

###該当のソースコード

<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>Stop Watch</title>
  <style>
     body{
            background: #e0e0e0;
            font-family: Arial,sans-serif;
            text-align: center;
     }
     #timerText{
           color: #00aaff;
           font-size: 128px;
           margin: 40px auto;
           text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
            }
  </style>
</head>
<body>
  <div id="timerText">0.00</div>
  <button id="start">START</button>
  <button id="stop">STOP</button>
  <button id="reset">RESET</button>
  <script>
     (function(){
          'use strict';

          var startTime;
          var timerId;
          var elasedTime = 0;

          var startButton = document.getElementById('start');
          var stopButton = document.getElementById('stop');
          var resetButton = document.getElementById('reset');
          var timerText = document.getElementById('timerText');

          startButton.addEventListener('click',function(){
               startTime = Date.now(); // 1970/1/1 00:00:00からの経過ミリ秒
               updateTimerText();
          });

          stopButton.addEventListener('click', function(){
               elapsedTime += Date.now() - startTIme;
               clearTimeout(timerId);
          });


          function updateTimerText() {
                timerId = setTimeout(function(){
                      var t = Date.now() - startTime + elapsedTime;
                      timerText.innerHTML = (t/1000).toFixed(2);
                      updateTimerText();
                }, 10);
          }

     })();
  </script>
</body>
</html>

kei344

2017/02/11 20:35

エラーは出ていませんか？デベロッパーツールで確認してみてください。http://eng-entrance.com/javascript-display-error

GenntaNakajo

2017/02/11 21:17

有難うございます。やってみます。

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

回答1件

ベストアンサー

タイプミスに気をつけてください。
0. 44行目、startTimeがstartTImeになっている。
0. 44行目、elasedTimeがelapsedTimeになっている。
0. 50行目、elasedTimeがelapsedTimeになっている。

上の3つを修正すると、以下のようになり、質問者さんのやりたいことが実現できると思います。

HTML
1<html lang="ja">
2<head>
3    <meta charset="utf-8">
4    <title>Stop Watch</title>
5    <style>
6        body {
7            background: #e0e0e0;
8            font-family: Arial, sans-serif;
9            text-align: center;
10        }
11
12        #timerText {
13            color: #00aaff;
14            font-size: 128px;
15            margin: 40px auto;
16            text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
17        }
18    </style>
19</head>
20<body>
21<div id="timerText">0.00</div>
22<button id="start">START</button>
23<button id="stop">STOP</button>
24<button id="reset">RESET</button>
25<script>
26    (function () {
27        'use strict';
28
29        var startTime;
30        var timerId;
31        var elasedTime = 0;
32
33        var startButton = document.getElementById('start');
34        var stopButton = document.getElementById('stop');
35        var resetButton = document.getElementById('reset');
36        var timerText = document.getElementById('timerText');
37
38        startButton.addEventListener('click', function () {
39            startTime = Date.now(); // 1970/1/1 00:00:00からの経過ミリ秒
40            updateTimerText();
41        });
42
43        stopButton.addEventListener('click', function () {
44            elasedTime += Date.now() - startTime;//elapsedTime->elasedTime, startTIme->startTime
45            clearTimeout(timerId);
46        });
47
48        function updateTimerText() {
49            timerId = setTimeout(function () {
50                var t = Date.now() - startTime + elasedTime;//elapsedTime->elasedTime
51                timerText.innerHTML = (t / 1000).toFixed(2);
52                updateTimerText();
53            }, 10);
54        }
55    })();
56</script>
57</body>
58</html>