Stop Timer HELP!

Javascript Programming
#1 
<!DOCTYPE HTML>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
    </script>
    <style>
          p {
            text-align: center;
            font-size: 60px;
            margin-top: 0px;
          }
          img {
            display: block;
            margin-left: auto;
            margin-right: auto;
          }
          button {
            background-color: #CF142B; /* Red */
            color: white;
            padding; 32px 16px;
            text-align: center;
            font-size: 24px;
            width: 50%;
          }
    </style>
 </head>

 <p id="Clock"></p>

<p>Days Until The Last Bitcoin Will Be Mined</p>
<br><br>

<div style="text-align:center">
<button id="stop">Stop Countdown</button>
</div>
<br><br>

<br><br>
<P>Made by Michael McClimon</p>

<img src="https://michaelmcclimon.files.wordpress.com/2020/12/dsc00426.jpg"/>
<p>GitHub link Below</p>
<p style="text-align:center">

<a href="https://github.com/michaelmcclimon">Click Here!</a></p>
<!-- Setting up my Clock so you can see it on the webpage.-->

<script>
//Date of last Bitcoin mined (this is an estimate!)
var finalDate = new Date("Jan 5, 2140 15:55:35").getTime();

//Updating countdown every 1 second
var m = setInterval(function(){

var rightNow = new Date().getTime();
var distance = finalDate - rightNow;

//time calculations for days, hours, minutes, and seconds

var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);

//displaying the clock on the webpage
document.getElementById("Clock").innerHTML = days + "d " + hours + "h " + minutes + "m " + seconds + "s ";


//for when the clock is finished and im dead and gone!
if (distance < 0) {
  let m = clearInterval(m);
  document.getElementById("Clock").innerHTML = "EXPIRED";
}
}, 1000);


let timerId;
timer();
timerId = setInterval(timer, 1000);

function stopTimer() {
    clearInterval(m);
    console.log("time's up", diff)
};






</script>



</html>


I cant seem to figure out why the stop timer wont stop when you click the button. The final two let timerID was my 2nd attmept but still havent been able to get it to work.
1 Like
#2

image

Apparently, you have not define the timer function, by the only reference for it is on that codeline, maybe you have to design its method?

Carlos Z

1 Like
#3

this was just an attempt with other code but i think it is wrong? so if i declare CLOCK as timerId it will work?

Not sure how to identify the CLOCK without renaming it? im just lost in genral where to start haha

#4

HI Mickey, if you are trying to create a button to stop the timer, you have to first attach a function to the button click.

You can do it using jQuery like this –

  $("#stop").click(function () {
      stopTimer();
    });
    function stopTimer() {
      clearInterval(m);
      console.log("time's up", diff);
    }

I used the id of the button to attach it with the function. So, if you click it, you will stop the timer.

Hope this helps.

Happy Learning!

1 Like
#5

hmmm still seeming to have trouble getting it to stop. i used the correct ID but im not sure why it wont stop… i must have missed something here…

<!DOCTYPE HTML>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
    </script>
    <style>
          p {
            text-align: center;
            font-size: 60px;
            margin-top: 0px;
          }
          img {
            display: block;
            margin-left: auto;
            margin-right: auto;
          }
          button {
            background-color: #CF142B; /* Red */
            color: white;
            padding; 32px 16px;
            text-align: center;
            font-size: 24px;
            width: 50%;
          }
    </style>
 </head>

 <p id="Clock"></p>

<p>Days Until The Last Bitcoin Will Be Mined</p>
<br><br>

<div style="text-align:center">
<button id="stop">Stop Countdown</button>
</div>
<br><br>

<br><br>
<P>Made by Michael McClimon</p>

<img src="https://michaelmcclimon.files.wordpress.com/2020/12/dsc00426.jpg"/>
<p>GitHub link Below</p>
<p style="text-align:center">

<a href="https://github.com/michaelmcclimon">Click Here!</a></p>
<!-- Setting up my Clock so you can see it on the webpage.-->

<script>
//Date of last Bitcoin mined (this is an estimate!)
var finalDate = new Date("Jan 5, 2140 15:55:35").getTime();

//Updating countdown every 1 second
var m = setInterval(function(){

var rightNow = new Date().getTime();
var distance = finalDate - rightNow;

//time calculations for days, hours, minutes, and seconds

var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);

//displaying the clock on the webpage
document.getElementById("Clock").innerHTML = days + "d " + hours + "h " + minutes + "m " + seconds + "s ";


//for when the clock is finished and im dead and gone!
if (distance < 0) {
  let m = clearInterval(m);
  document.getElementById("Clock").innerHTML = "EXPIRED";
}
}, 1000);

 $("#stop").click(function () {
     stopTimer();
   });
   function stopTimer() {
     clearInterval(m);
     console.log("time's up", diff);
   }






</script>



</html>
#6

My goodness, I finally got it! Thank you for the help!!! I must have been working off the wrong doc for a while but it is all working properly now! Bigtime help :grin:

1 Like
#7

No worries. More power to you. :slight_smile:

1 Like