Javascript　カウントダウンタイマーの実装　returnの書き方

前提・実現したいこと

初心者です。
Jsでのカウントダウンタイマー実装にあたり
2点ほど教えていただきたい事があります。

①Javascriptでカウントダウンタイマーを作成しており
スタートボタンが押されたら再度押せなくなるように設定し
ストップボタンを押したら復帰するプログラムを書いたのですが
2度目のスタートボタンを押すと両方無効化になってしまう。
→これを繰り返しても実装できるようにしたい

②リセットボタンを押しても表示は戻るがボタンが復帰しない
→最初の状態に戻したい。

どの部分のコードが間違っているのか、なぜ実装されないのか
自分では説明出来ないのでご回答頂きたいと思います。
初歩的な質問ですがよろしくお願い致します。

該当のソースコード

<!DOCTYP html>
<html lang="ja">
<head>
    <meta charset = "utf-8">
    <title>JavaScriptの練習</title>    
</head>
<body>
    <!--1、htmlで表示される物を書く-->
    <div id="gamenn">03:00</div>
    <div class="button3tu">
        <button id="start">スタート</button>
        <button id="stop">ストップ</button>
        <button id="reset">リセット</button>
    </div>
    
    <script>
    // 2、windows.onloadでクリックの監視プログラム
    window.onload  = function() {
    // 3、書き換える為にhtmlを取得
        const gamenn = document.getElementById("gamenn");
        const time = document.getElementById("time");
        const start = document.getElementById("start");
        const stop = document.getElementById("stop");
        const reset = document.getElementById("reset");
      
    // 4、buttonの具体的な操作（クリックされたら、関数呼び出し、false）
        start.addEventListener("click", count_start, false);
        stop.addEventListener("click", count_stop, false);
        reset.addEventListener("click", count_reset, false);
    }
    
    let interval_id;　//setIntervalを使う際にセットで作っておく！
    let time_hyouzi = 180; //初期値は180（3分）だよ
    let min = 0;
    let sec = 0;

    // 5、スタートボタンの処理を書く
    function count_start() {　
        interval_id = setInterval(countDown, 1000) //countDownの関数を1秒ごとに動かす
        //setIntervalを使う際は箱も一緒に作っておく→clearIntervalでも使うのでグローバル変数で宣言しておくこと
        //setIntervalは関数countDownを１秒ごとに処理
        
        //スタートが押されたら2重クリック出来ない様に無効化
        document.getElementById("start").disabled = true
    }
    
    function countDown() {
        time_hyouzi--　//--で下がる処理
        let min = Math.floor(time_hyouzi / 60); //minは分。2分59秒の時とか小数点が出ちゃうからMath.floorで消す　
        let sec = time_hyouzi - (min * 60);　//secはセコンド＝秒
        // 48行目は　let sec = time_hyouzi % 60; でも行ける
        gamenn.innerHTML = min + ":" + sec;
        
        
            
        if(time_hyouzi === 0) {　//表示されている値が0になったら↓を表示して
        gamenn.innerHTML = "time up!!"　//.innerHTMLを使ってタイムアップ表示！
        clearInterval(interval_id) //０になったら止まれ（これが無いと-まで行ってしまう）
        document.getElementById("stop").disabled = true; //stopを押させない
        }
        
    }
    
    function count_stop() {
        clearInterval(interval_id) //何を止めるの？？→interval_idだよ！
        document.getElementById("stop").disabled = true; //ストップ中はストップを押させない処理
        // ストップを押したらスタートを有効にする処理
       document.getElementById("start").disabled = false
    }
    
    function count_reset() {
        //gamennを3：00に戻す処理
        time_hyouzi = 180;
        min = 0;
        sec = 0;
        
        let reset = document.getElementById("gamenn");
        reset.innerHTML = "03:00";
        
    }
    </script>
</body>
</html>

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

回答2件

ベストアンサー

①2度目のスタートボタンを押すと両方無効化になってしまう。

カウントを止める際に、document.getElementById("stop").disabled = true; と、ボタンを押させないコードを記述しているにも関わらず、再度スタートボタンを押した際に押せるようにボタンを戻す動作を記述していないからです。

②リセットボタンを押しても表示は戻るがボタンが復帰しない

おそらくですが、「リセットボタンを押しても」ではなく、「タイマーが0になったら」ではないでしょうか？
タイマーが0になったら、document.getElementById("stop").disabled = true;とストップボタンを押させないようにしています。そしてタイマーがストップする際はスタートボタンが押されているわけなので、スタートボタンも押せないようになっています。
これがリセットボタン内で元に戻す必要がありますが、それが記述されていないので、どちらのボタンも押せない、という状況ができているのだと思われます。

投稿2020/08/01 07:23

yuuyu

総合スコア1139

Mackatta

2020/08/01 09:07

2件共理由がわかり納得しました！ありがとうございました！！

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

すでに答えがでているのでコードだけ貼っておきます。

javascript
1    function count_start() {　
2        interval_id = setInterval(countDown, 1000) //countDownの関数を1秒ごとに動かす
3        //setIntervalを使う際は箱も一緒に作っておく→clearIntervalでも使うのでグローバル変数で宣言しておくこと
4        //setIntervalは関数countDownを１秒ごとに処理
5
6        //スタートが押されたら2重クリック出来ない様に無効化
7        document.getElementById("start").disabled = true;
8        document.getElementById("stop").disabled = false; // ★これが抜けている
9    }

javascript
1    function countDown() {
2        time_hyouzi--　//--で下がる処理
3        let min = Math.floor(time_hyouzi / 60); //minは分。2分59秒の時とか小数点が出ちゃうからMath.floorで消す　
4        let sec = time_hyouzi - (min * 60);　//secはセコンド＝秒
5        // 48行目は　let sec = time_hyouzi % 60; でも行ける
6        gamenn.innerHTML = min + ":" + sec;
7
8
9
10        if(time_hyouzi === 0) {　//表示されている値が0になったら↓を表示して
11        gamenn.innerHTML = "time up!!"　//.innerHTMLを使ってタイムアップ表示！
12        clearInterval(interval_id) //０になったら止まれ（これが無いと-まで行ってしまう）
13        document.getElementById("stop").disabled = true; //stopを押させない
14        document.getElementById("start").disabled = false; // ★これが抜けている
15        }
16
17    }
18

投稿2020/08/01 07:47

YakumoSaki

総合スコア2027

Mackatta

2020/08/01 09:06

コメントアウトでのご回答ありがとうございました！

yuuyu

2020/08/01 09:10

2つ目の document.getElementById("start").disabled = false; // ★これが抜けているこれはcount_reset()内に記載した方がいいですね。というのも終了判定が==なので、リセットする前にスタートを押してしまうとマイナスまでいくので、せっかく止めた意味がなくなりますので。

Mackatta

2020/08/01 11:04

そうなのですね！早速コードを書き直してみます！ありがとうございます

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

あなたの回答