javascriptで３分タイマーに”Time UP”と表示させる方法

前提・実現したいこと

javascriptで３分タイマーを作成中で、３分経過後に"Time UP!"と表示させようと思っています。
下記のコードでエラーは出ていないのですが、３分経過しても"Time UP!"と表示されずそのままカウントが進みます。
現在の問題点は何処にあるのでしょうか。また、どのように解決したら良いのかよろしければご教示いただけないでしょうか。
よろしくお願いいたします。

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>timer</title>
    <link rel ="stylesheet" href ="time.css">
    <script>
        var time = 180;
        var timer;
        var setI;
        var min;
        var sec;
        function startTimer() {
            time -= 1;
            min = Math.floor( time / 60 );
            sec = time % 60;
            min = ('00' + min).slice(-2);
            sec = ('00' + sec).slice(-2);
            timer = document.getElementById('timer');
            timer.innerHTML = min + ":" + sec;
            start.disabled = "disabled";
            if (time === 0) {
                timer.innerHTML = "Time&nbspUP!";
            } else {
                startTimer();
            }
        }
        function stopTimer() {
            clearInterval(setI);
            start.disabled = "";
            console.log("test")
        }
        function resetTimer() {
            start.disabled = "";
            clearInterval(setI);
            
            timer.innerHTML = '03:00';
        }
        function startInterval() {
            setI = setInterval(startTimer,1000);
        }
        window.onload = function() {
            var start = document.getElementById('start');
            start.addEventListener('click',startInterval,false);
            timer = document.getElementById('timer');
            var stop = document.getElementById('stop');
            stop.addEventListener('click',stopTimer,false);
            var reset = document.getElementById('reset');
            reset.addEventListener('click',resetTimer,false);
        }
    </script>
</head>
<body>
    <div id = "box">
        <div id ="timer">03:00</div>
        <form>
            <input type ="button" id ="start" name ="start" value ="スタート">
            <input type ="button" id ="stop"  name ="stop" value ="ストップ" >
            <input type ="button" id ="reset" name ="reset" value ="リセット">
        </form>
    </div>
</body>
</html>

試したこと

ここに問題に対して試したことを記載してください。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

kei344

2019/04/07 11:53

（質問文は編集できます）質問文のコードはコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

m.ts10806

2019/04/07 12:14

「うまくいかない」では状況は何も伝わらないので現象を具体的に記載してください。エラーが出ているかどうかとか。

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

回答1件

ベストアンサー

startTimer()関数内でstartTimer();を使用しているので、無限ループしています。
一応180回ループすれば一旦ループから抜け出しますが、
setInterval()で１秒ごとにstartTimerを呼び出しているので、
１秒経てばあとはオーバーフローするまで無限ループします。

js
1if (time === 0) {
2    timer.innerHTML = "Time&nbspUP!";
3    clearInterval(setI); //追記。タイマー停止用。
4} else {
5//    startTimer();
6}

投稿2019/04/07 14:29

yuuyu

総合スコア1135

cabbage7

2019/04/07 14:49

ご回答ありがとうございます。おかげさまで理由もその解決方法もしっかりと理解することが出来ました。本当にありがとうございました。

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

あなたの回答

tips

プレビュー

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

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

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

ただいまの回答率
85.49%

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

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

質問する

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

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