Javascript 3分タイマー作成　タイマーが動かない

実現したいこと
スタート・ストップ・リセットボタンを備えた3分のタイマーを作成しています。

発生している問題・エラーメッセージ
スタートボタンを押してもタイマーがスタートしなくて困っております。

Javascript
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>timer</title>
6    <script>
7　　//interval_idの定義
8    var interval_id;
9    //setIntarvalの設置
10    function start_timer() {
11        interval_id = setInterval(count_down, 1000);
12    }
13　　//カウントとID:timer内の書き換え用関数
14    var time = 180;
15    var min = 0;
16    var sec = 0;
17    var timer = document.getElementById('timer');
18    function count_down() {
19        if (time > 0) {
20        var min = Math.floor(time / 60); 
21        var sec =(time % 60); 
22        time--;
23        timer.innerHTML = '0' + min + ':' + sec;
24        } else if (time =**==** 0) { /*修正しました*/
25        timer.innerHTML = "TIME UP!";
26        clearInterval(interval_id);
27        }
28    }
29　　//タイマーSTOP
30    function stop_timer() {
31        clearInterval(interval_id);
32    }    
33    //タイマーRESET
34    function reset_timer() {
35        clearInterval(interval_id);
36        var time = 180;
37        var min = 0;
38        var sec = 0;
39        timer.innerHTML = '03:00';
40    }
41    
42    window.onload = function() { 
43            var start = document.getElementById('start'); 
44            start.addEventListener('click', start_timer, false); 
45            var stop = document.getElementById('stop'); 
46            stop.addEventListener('click', stop_timer, false); 
47            var reset = document.getElementById('reset'); 
48            reset.addEventListener('click' ,reset_timer, false); 
49        } 
50    </script>
51    </head>
52    <body>
53        <div id="timer">03:00</div>
54        <button id="start">スタート</button>
55        <button id="stop">ストップ</button>
56        <button id="reset">リセット</button>
57    </body>
58</html>

どなたかご教示頂けるとうれしいです…。お願いします。

kei344

2019/03/01 16:33

（質問文は編集できます）「何」が「どのように」わからないのか、コードのどの部分で詰まっているのかなどを、出ているエラーなどと併せて、具体的に記述されたほうが回答を得られやすいと思います。

512

2019/03/01 16:35

書いている途中で誤って投稿してしまいました。失礼しました。

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

回答2件

ベストアンサー

コンソールにエラーが出るので、それを手がかりにデバッグしてみましょう。

今回の場合

Cannot set property 'innerHTML' of null

ですので、timer.innerHTMLのtimerがnullになっているとわかります。

ということは、idがtimerの要素が見つからないということなので、よくよく見てみるとheadにscriptを書いているせいでbodyの生成より前にスクリプトが実行されてしまっています。

シンプルに、scriptをbodyの最下部にもっていきましょう。

投稿2019/03/01 17:06

yu-smc

総合スコア610

512

2019/03/01 17:15

丁寧にありがとうございます。解決いたしました。スクリプトの書き方の順番、なんとなくで済ませていたので、もう一度さらってみます。

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

とりあえず1箇所指摘。

js
1// } else if (time = 0) {
2//                 ↓
3   } else if (time === 0) {

投稿2019/03/01 16:38

kei344

総合スコア69643

あなたの回答

tips

プレビュー

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

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

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

ただいまの回答率
85.29%

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

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

質問する

関連した質問