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

javascriptで動くストップウォッチを作ったのですが、STARTボタンを押してもスタートしません。
どこかにミスがあるはずなのですが、自力で見つけることができませんでした・・。
どなたか、ご指南ください。
よろしくお願いいたします。

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

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

回答2件

ソースコードについてですが、まず

javascript
1var = startTime;
2var = timerId;

というのはおそらくミスだと思います。また前半部で

javascript
1(function(){
2  'use strict';
3  ------略------
4  updateTimerText();
5});

と、わざわざfunctionを()で囲む必要はないと思います。function()自体もいらないのでは。

後半部についてですが、https://techacademy.jp/magazine/5541を参照すると、updateTimerText()という関数は必要なく、下記のように記述すればいいと思います。

javascript
1timerId = function(){
2        var t = Date.now() - startTime;
3        timerText.innerHTML = (t / 1000).toFixed(2);
4        setTimeout(timerId,10);
5      };

以上よりjavascriptのソースコードはこれでいいのではないでしょうか。

javascript
1var startTime;
2var timerId;
3
4var startButton = document.getElementById('start');
5var stopButton = document.getElementById('stop');
6var resetButton = document.getElementById('reset');
7var timerText = document.getElementById('timerText');
8
9startButton.addEventListener('click', function(){
10  startTime = Date.now();
11  timerId();
12})
13
14timerId = function(){
15  var t = Date.now() - startTime;
16  timerText.innerHTML = (t / 1000).toFixed(2);
17  setTimeout(timerId,10);
18};

投稿2017/04/04 01:21

退会済みユーザー

総合スコア0

2017js

2017/04/04 01:35

丁寧な解説ありがとうございます。無駄な部分や冗長的な部分があるということですね。もっと勉強してシンプルなコードが書けるよう、努力します！

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

ベストアンサー

下記の様にvar =を修正すると、Startボタンが動作しました。(Stopボタンは別途、実装予定ですよね？)

javascript
1//var = startTime;
2//var = timerId;
3var startTime;
4var timerId;

投稿2017/04/04 00:53

motuo

総合スコア3027

2017js

2017/04/04 00:59

早速の回答、ありがとうございます。今、 //var = startTime; //var = timerId; var startTime; var timerId; 上記修正をしてみたのですが、やはりスタートしませんでした・・。不思議です。（なお、Stopボタンは後ほど実装予定です）

2017js

2017/04/04 01:06

あー、動きました！！！私のミスでした。ありがとうございました！おっしゃる通りでした！

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

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

関連した質問