Home>

It is a complete beginner!
The task is to create the content of the 3 minute countdown timer created with javascript using jQuery.
I'm going to understand a bit until I get the element and create the function, but when I use jQuery to display it, the timer doesn't work!
I'd love to know what code is wrong!
Thank you!

So far, the javascript code works fine with the following code, but if there is something you should fix, please point it out!

⬇️ javascript only code

<!DOCTYPE html>
<html>
  <head>
      <meta charset="utf-8">
      <title>Countdown timer</title>
      <script>
        var id;
        var time = 180;
        var min = 0;
        var sec = 0;
        function count_start(){
            id = setInterval(count_down,100);
        }
        function count_down(){
            var timer = document.getElementById("timer");
            if(time === 0){
                timer.innerHTML = "TIME UP!!!";
            }else{
                time--;
                min = Math.floor(time/60);
                sec = Math.floor(time %60);
                timer.innerHTML = "0" + min + ":" + sec;
            }
            if(sec<10){
                timer.innerHTML = "0" + min + ":" + "0" + sec;
                }
        }
        function count_stop(){
            clearInterval(id);
        }
        function count_reset(){
            var timer = document.getElementById("timer");
            timer.innerHTML = "03:00";
        }
        window.onload= function(){
            var start = document.getElementById("start");
            start.addEventListener("click",count_start,false);
            var stop = document.getElementById("stop");
            stop.addEventListener("click",count_stop,false);
            var reset = document.getElementById("reset");
            reset.addEventListener("click",count_reset,false);
        };
      </script>
  </head>
  <body>
        03:00
      <button>start</button>
      <button>stop</button>
      <button>reset</button>
  </body>
</html>

⬇︎ javascript + jQuery

<!DOCTYPE html>
<html>
  <head>
      <meta charset="utf-8">
      <title>10-5</title>
      <script src="jquery-3.5.1.min.js">
            var id;
            var time = 180;
            var min = 0;
            var sec = 0;
            function count_start(){
                id = setInterval(count_down,1000);
            }

            function count_down(){
                    if( time === 0){
                        $("#timer").html("<p>TIME UP!</p>");
                    }else{
                        time--;
                        min = Math.floor(time/60);
                        sec = Math.floor(time %60);
                        $("timer").html("0" + min + ":" + sec );
                    if(sec<10){
                        $("timer").html("0" + min + ":" + "0" + sec );
                        }
                    }
                }
            function count_stop(){
                clearInterval(id);
            }
            function count_reset(){
                $("reset").html("03:00");
            }
            $(function(){
                $("#start").click(count_stop);
                $("#stop").click(count_stop);
                $("#reset").click(count_reset);
            });
      </script>
  </head>
  <body>
        03:00
      <button>start</button>
      <button>stop</button>
      <button>reset</button>
  </body>
</html>
  • Answer # 1

    Use a text comparison tool to compare before and after rewriting.
    The points that should not be changed are changed.

    The configuration of the block ({~}) of the count_down function has changed

    The function to call when #start is clicked has changed

    Also#xxxSelectors that should be written in the formxxxThere is a part written.

  • Answer # 2

    The script tag is written incorrectly.

    <script src="jquery-3.5.1.min.js"></script>
    <script>
      // your code
    </script>

    Write the code you want to read and the code you actually embed separately.