jQuery を用いてカウントダウンタイマーを作成したい

全くの初心者です！
javascriptで作成した３分カウントダウンタイマーの内容をjQueryを使って作成という課題です。
要素を取得して関数を作成するところまでは少しばかり理解しているつもりですが、jQueryを用いて表示したらタイマーが動作しません！
どこのコードが間違っているのか、アドバイスいただけたらと思います！
よろしくお願いします！

今のところjavascriptのコードは下記のコードで問題なく動作しますが、直した方がいいところがあれば是非ご指摘お願い致します！

⬇️javascriptのみのコード

javascript
1<!DOCTYPE html>
2<html>
3    <head>
4        <meta charset="utf-8">
5        <title>カウントダウンタイマー</title>
6        <script>
7        
8        var id;
9        var time = 180;
10        var min = 0;
11        var sec = 0;
12        
13        function count_start(){
14            id = setInterval(count_down,100);
15        }
16        
17        function count_down(){
18            var timer = document.getElementById("timer");
19            if(time === 0){
20                timer.innerHTML = "TIME UP!!!";
21            }else{
22                time--;
23                min = Math.floor(time / 60);
24                sec = Math.floor(time % 60);
25                timer.innerHTML= "0"+ min + ":" + sec;
26            }
27            if(sec < 10){
28                timer.innerHTML = "0"+ min + ":" + "0" + sec;
29                }
30        }
31        
32        function count_stop(){
33            clearInterval(id);
34        }
35        
36        function count_reset(){
37            var timer =  document.getElementById("timer");
38            timer.innerHTML = "03:00";
39        }
40        
41        window.onload= function(){
42            var start = document.getElementById("start");
43            start.addEventListener("click",count_start,false);
44            var stop = document.getElementById("stop");
45            stop.addEventListener("click",count_stop,false);
46            var reset = document.getElementById("reset");
47            reset.addEventListener("click",count_reset,false);
48        };
49            
50        </script>
51    </head>
52    <body>
53        <div id="timer">03:00</div>
54        
55        <button id="start">start</button>
56        <button id="stop">stop</button>
57        <button id="reset">reset</button>
58    </body>
59</html>

⬇︎javascript + jQuery

jQuery
1<!DOCTYPE html>
2<html>
3    <head>
4        <meta charset="utf-8">
5        <title>10-5</title>
6        <script src="jquery-3.5.1.min.js">
7            
8            var id;
9            var time = 180;
10            var min = 0;
11            var sec = 0;
12            
13            function count_start(){
14                id = setInterval(count_down,1000);
15            }
16            
17            
18            function count_down(){
19                    if( time === 0){
20                        $("#timer").html("<p>TIME UP!</p>");
21                    }else{
22                        time--;
23                        min = Math.floor(time / 60);
24                        sec = Math.floor(time % 60);
25                        $("timer").html("0" + min + ":" + sec );
26                        
27                    if(sec < 10){
28                        $("timer").html("0" + min + ":" + "0" + sec );
29                        }
30                    }
31                }
32            
33            function count_stop(){
34                clearInterval(id);
35            }
36            
37            function count_reset(){
38                $("reset").html("03:00");
39            }
40            
41            $(function(){
42                $("#start").click(count_stop);
43                $("#stop").click(count_stop);
44                $("#reset").click(count_reset);
45            });
46            
47        </script>
48    </head>
49    <body>
50        <div id="timer">03:00</div>
51        
52        <button id="start">start</button>
53        <button id="stop">stop</button>
54        <button id="reset">reset</button>
55    </body>
56</html>

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

回答2件

ベストアンサー

テキスト比較ツールで、書き換える前と書き方あとを比較してください。
変えてはいけいない箇所が変わっています。

count_down関数のブロック（{～}）の構成が変わっている
#startをクリックしたときに呼び出す関数が変わっている

また#xxxの形式で書くべきセレクタがxxxと書かれている箇所があります。

投稿2020/06/25 01:20

ku__ra__ge

総合スコア4524

K-06

2020/06/25 01:55

ご指摘ありがとうございます！！細かいところまで全く目が行き届いてなかったです！特に、「#xxxの形式で書くべきセレクタがxxxと書かれている箇所がある。」のところに関しては、ミスが多すぎました。これからもよろしくお願いします！

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

scriptタグの書き方がまちがっています。

HTML
1<script src="jquery-3.5.1.min.js"></script>
2<script>
3  // 自分のコード
4</script>

読み込みたいコードと実際に自分が埋め込むコードは分けて書いてください。

投稿2020/06/25 01:13

退会済みユーザー

総合スコア0

K-06

2020/06/25 01:53

ご指摘ありがとうございます！！直したらちゃんと動作しました！！またよろしくお願いします！！！

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

あなたの回答

tips

プレビュー

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

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

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

ただいまの回答率
85.35%

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

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

質問する

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

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

jQuery を用いてカウントダウンタイマーを作成したい

関連した質問