l-emi l-emi - 3 months ago 17
Javascript Question

Stopping a countdown on click

I have set a function to start counting down from 25 minutes upon clicking a button. I was also able to make it reset back to 25 minutes when clicking the Reset button, but it continues counting down. How do I make it so that when the Reset button is clicked the text reverts back to 00:25:00 and stays there until Go is clicked again?

JavaScript:

function count() {
var startTime = document.getElementById("time").innerHTML;
var pieces = startTime.split(":");
var time = new Date();
time.setHours(pieces[0]);
time.setMinutes(pieces[1]);
time.setSeconds(pieces[2]);
var timedif = new Date(time.valueOf() - 1000);
var newtime = timedif.toTimeString().split(" ")[0];
document.getElementById("time").innerHTML = newtime;
setTimeout(count, 1000);
}

$("#go").click(function() {
count();
})

$("#reset").click(function() {
document.getElementById("time").innerHTML = "00:25:00";


Here's the fiddle. Thanks!

Answer

You need to clear your setInterval call with clearInterval:

var clr;
function count() {
    var startTime = document.getElementById("time").innerHTML;
    var pieces = startTime.split(":");
    var time = new Date();
    time.setHours(pieces[0]);
    time.setMinutes(pieces[1]);
    time.setSeconds(pieces[2]);
    var timedif = new Date(time.valueOf() - 1000);
    var newtime = timedif.toTimeString().split(" ")[0];
    document.getElementById("time").innerHTML = newtime;
    clr=setTimeout(count, 1000);
}

$("#go").click(function() {
    count();
})

$("#reset").click(function() {
    document.getElementById("time").innerHTML = "00:25:00";
    clearInterval(clr);
})

jsFiddle example

var clr;

function count() {
  var startTime = document.getElementById("time").innerHTML;
  var pieces = startTime.split(":");
  var time = new Date();
  time.setHours(pieces[0]);
  time.setMinutes(pieces[1]);
  time.setSeconds(pieces[2]);
  var timedif = new Date(time.valueOf() - 1000);
  var newtime = timedif.toTimeString().split(" ")[0];
  document.getElementById("time").innerHTML = newtime;
  clr = setTimeout(count, 1000);
}

$("#go").click(function() {
  count();
})

$("#reset").click(function() {
  document.getElementById("time").innerHTML = "00:25:00";
  clearInterval(clr);
})
@import 'https://fonts.googleapis.com/css?family=Montserrat';
 body {
  background-color: bisque;
  font-family: 'Montserrat', sans-serif;
}
.container-fluid {
  margin: 0;
  padding: 0;
  min-height: 100%;
}
.absolute-center {
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
#tomato {
  background-color: #D72028;
  height: 300px;
  width: 300px;
  border-radius: 50%;
  border: 8px solid #A01C20;
  margin-top: 150px;
}
#reset {
  height: 50px;
  background-color: #EB4539;
  /*border: 1px solid #A01C20;*/
  border: none;
  color: bisque;
  font-size: 2em;
  margin-right: 5;
}
#reset:active {
  background-color: #d63a2f;
}
#go {
  height: 50px;
  background-color: #EB4539;
  /*border: 1px solid #A01C20;*/
  border: none;
  color: bisque;
  font-size: 2em;
}
#go:active {
  background-color: #d63a2f;
}
#gores {
  position: absolute;
  display: inline-block;
  text-align: center;
  padding-top: 60%;
  z-index: 10;
}
#time {
  position: absolute;
  display: inline-block;
  text-align: center;
  padding-top: 38%;
  font-size: 4em;
  color: #FFFFD7;
  z-index: 10;
}
#title {
  display: block;
  text-align: center;
  font-size: 2.5em;
  font-family: 'Montserrat', sans-serif;
  color: #691112;
  font-weight: bold;
}
#desc {
  text-align: center;
  color: #691112;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">

  <h3 id="title">Pomodoro</h3>
  <p id="desc">Welcome to Pomodoro Timer! Press go to start counting down from 25 minutes, or set it to whatever time you need.</p>


  <div id="tomato" class="absolute-center">
    <h1 id="time" class="absolute-center">00:25:00</h1>

    <div id="gores" class="absolute-center">
      <button id="reset">reset</button>
      <button id="go">go</button>
    </div>
  </div>


</div>