javascriptにて３分のカウトダウンタイマーを作成してます。動きません。。

javascript
1コード
2```<!DOCTYPE html>
3<html lang="ja">
4<head>
5    <meta charset="UTF-8">
6    <title>timer</title>
7    <script>
8        var interval_id;
9        function timer_start(){
10            interval_id=setInterval(count_down,1000);
11        }
12        var time =180;
13        var min =0;
14        var sec =0;
15        var timer =document.getElementById('timer');
16        
17        function count_down(){
18            if(time>0){
19               min=Math.floor(time/60);
20               sec=(time%60);
21               --time;
22               timer.innerHTML=(min+":"+sec);
23            }else {
24                timer.innerHTML="TIME UP";
25                clearInterval(interval_id);
26            }
27        }
28        function stop_push(){
29            clearInterval(interbal_id);
30        }
31        function reset_button(){
32            min=Math.floor(time/60);
33            sec=(time%60);
34            timer.innerHTML=(min+":"+sec);
35        }
36        window.onload=function(){
37             var start = document.getElementById('start'); 
38             start.addEventListener("click",timer_start,false);
39             var stop = document.getElementById('stop'); 
40            stop.addEventListener('click',stop_push,false); 
41            var reset = document.getElementById('reset'); 
42            reset.addEventListener('click',reset_button,false); 
43        }
44    </script>
45    </head>
46    <body>
47        <div id="timer">03:00</div>
48        <button id="start">スタート</button>
49        <button id="stop">ストップ</button>
50        <button id="reset">リセット</button>
51    </body>
52</html>

2019/08/30 10:42

こちらの質問が複数のユーザーから「過去の低評価」という指摘を受けました。

miyabi_takatsuk

2019/08/28 01:29

コードは、マークダウン形式で記載しましょう。投稿ツールの<code>ボタンで挿入される文字列の中にコードを入れると、できます。

m.ts10806

2019/08/28 01:36

>動きません。。「動かない」「ダメでした」「うまくいきません」などは他者に起きていることは何も伝わらないので実際に起きている現象を記載してください。「何も起きない」のでしたらいくつか理由があるので、例えばブラウザ開発ツールのコンソールでエラーが出ていない確認するとか、「通っているであろう処理」にconsole.log(1);とか入れてコンソール出力を確認してみるとか、デバッグしてみてください。 https://teratail.com/help/question-tips#questionTips3-4-1

azuapricot

2019/08/28 01:36

コードとタイトルで要件を書くだけじゃなくて、質問文に具体的にどうやったんだけどどうなったっていうのを記載したほうがよいかと思います。先生や上司にコードだけ見せたらどうなりますか？「で？どうしてほしいの？」OR「一言もないの？」って言われちゃいますよね。それと同じです。

yamap55

2019/08/28 01:44

関連した質問に同じ内容の質問もありますので見ると色々勉強になるかと思います。（っというか、このお題はどこが出してるんですか？？）

miyabi_takatsuk

2019/08/28 01:46

エスパー回答してしまった・・・。質問者さん、具体的な質問に修正をお願いします。また、マークダウン形式にまだなっていませんよ。挿入された文字列の間、"コード"という文字の部分にコードをペーストしてください。

m.ts10806

2019/08/28 01:49

reset.addEventListener('click',reset_button,false); でteratail内検索するとまぁまぁありますね

m.ts10806

2019/08/28 02:09

querykuma

2019/08/28 02:39

ブラウザは何を使ってます？もしChromeかFirefoxならエラーの見方についてアドバイスできるかもしれません。

zer0312

2019/08/28 02:40

クロームを使用しております。

m.ts10806

2019/08/28 02:41

なるほど。質問ではなく作業依頼ということですね。

querykuma

2019/08/28 02:52 編集

クロームのデベロッパーツールを起動してください。スタートを押したら「Console」にエラーがでます。「Sources」の「{}」のPretty Print（きれいに表示）を押したらプログラムが見やすくなります。 interbal_idをinterval_idに直すのはエラーを見ればわかります。デベロッパーツールは機能がいっぱいあるので検索して調べてみてください。 QiitaやteratailやGitHubを使うならマークダウンの書き方を学びましょう。 ```html <html></html> ```

azuapricot

2019/08/28 02:51

回答してもらってさらにここ違うんだけどはすごい失礼ですねぇ動かないっていう質問だから動くようになったら要件クリアですけど

m.ts10806

2019/08/28 03:17

同じやり方してると誰もアドバイスしなくなりますのでご注意を。詳しくはサイトのヘルプから各ガイドライン熟読してください。マナー、ルールです。守れない人がどうなるかは分かりますよね

dit.

2019/08/29 01:09

何度も言われているのに一向に直ってないのでもう一度指摘します。 tetatailにはコードを見やすくするための仕組みがあります。（皆さんが「コードブロックにしてくれ」と言っているもの） ```html ここにコード ``` という形にしてください。HTMLでいう、タグみたいなものです。 <div>ここに内容</div>みたいなものですが、改行を入れないとうまくいきません。パソコンからの編集なら右側にプレビューが出ているはずなので確認しながら対処してください。

回答2件

ベストアンサー

原因は、timer変数に格納してる、

<div id="timer">03:00</div>の取得が、DOM（HTML）が読み込まれる前に取得しようとしているためです。よって、timer変数をあらかじめ定義しておく、下記のやり方でどうでしょうか。

javascript
1var interval_id;
2function timer_start(){
3  interval_id=setInterval(count_down,1000);
4}
5var time =180;
6var min =0;
7var sec =0;
8// タイマー要素を入れるtimer変数を先に宣言
9var timer;
10
11function count_down(){
12  if(time>0){
13    min=Math.floor(time/60);
14    sec=(time%60);
15    --time;
16    timer.innerHTML=(min+":"+sec);
17  } else {
18    timer.innerHTML="TIME UP";
19    clearInterval(interval_id);
20  }
21}
22function stop_push(){
23  // interbal_idになっていたため、修正
24  clearInterval(interval_id);
25}
26function reset_button(){
27  min=Math.floor(time/60);
28  sec=(time%60);
29  timer.innerHTML=(min+":"+sec);
30}
31window.onload=function(){
32  // DOMが読み込まれてから、timer変数に要素を格納する
33  timer =document.getElementById('timer');
34  var start = document.getElementById('start'); 
35  start.addEventListener("click",timer_start,false);
36  var stop = document.getElementById('stop'); 
37  stop.addEventListener('click',stop_push,false); 
38  var reset = document.getElementById('reset'); 
39  reset.addEventListener('click',reset_button,false); 
40}

投稿2019/08/28 01:41

miyabi_takatsuk

総合スコア9511

回答へのコメント

zer0312

2019/08/28 01:59

詳しいご説明ありがとうございます。リセットボタンの際、3：00に戻したいのと、スタートボタンを押したとき03：0から始まるので03：00から02：59に進んでいくとありがたいです。

miyabi_takatsuk

2019/08/28 02:48

質問の内容の詳細が追記されていないので、要件が判別しずらいですが、 ”動かない”というのが、setIntervalの中身が実行されない、動作しないということでしたら、本質問の要件は満たせている状態です。よって、申し訳ございませんが、これ以上の回答は控えさせていただきます。もし、そのタイマー部分の"文字列の修正"の箇所の回答もお望みならば、質問文の修正をしてから、改めて、ご要望をお願いいたします。

仕様が不明なところが多々ありますね

javascript
1<script>
2window.addEventListener('DOMContentLoaded',()=>{
3  var timerId;
4  var timer=document.querySelector("#timer");
5  var defaultTime=180;
6  var count=0;
7  var format_time=num=>parseInt(100+num/60).toString().substr(-2)+":"+(100+num%60).toString().substr(-2);
8  document.querySelector("#start").addEventListener('click',()=>{
9    clearInterval(timerId);
10    timerId=setInterval(()=>{
11      count++;
12      timer.textContent=format_time(defaultTime-count);
13      if(count==defaultTime) clearInterval(timerId);
14    },100);
15  });
16  document.querySelector("#stop").addEventListener('click',()=>{
17    clearInterval(timerId);
18  });
19  document.querySelector("#reset").addEventListener('click',()=>{
20    clearInterval(timerId);
21    timer.textContent=format_time(defaultTime);
22  });
23});
24</script>
25<div id="timer">03:00</div>
26<button id="start">スタート</button>
27<button id="stop">ストップ</button>
28<button id="reset">リセット</button>
29