Update date object assigned variable

Question

This is a count up timer, counting up in time from when the page is loaded, I was to make a function called resetcountupDate() which sets it back to zero by making the variable countupDate equal to the current date (using date() or something), and I want the button on the 4th to last line to do the function, my code below doesn't work in terms of resetting the timer.

<!DOCTYPE HTML>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1" , charset="UTF-8">
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@100&display=swap');
    p {
      font-family: 'Roboto Slab', serif;
      text-align: center;
      font-size: 60px;
      margin-top: 0px;
    }
  </style>
</head>

<body>

  <p id="demo"></p>

  <p></p>
  <p></p>
  <p></p>
  <p></p>



  <script>
    // Set the date we're counting up from
    var countupDate = new Date();

    function resetcountupDate() {
      var countupDate;
      countupDate = Date();
    }

    // Update the count up every 1 second
    var x = setInterval(function() {

      // Get today's date and time
      var now = new Date().getTime();

      // Find the distance between now and the count up date
      var distance = now - countupDate;

      // 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);

      // Output the result in an element with id="demo"
      document.getElementById("demo").innerHTML = days + "d " + hours + "h " +
        minutes + "m " + seconds + "s ";


    }, 1000);
  </script>

  <input type=button value="Show Time" onclick="resetcountupDate();">

</body>

</html>

This might help you: https://dmitripavlutin.com/javascript-scope/ — Ivanka Todorova, Oct 01 '20 at 13:40
In `resetcountupDate` remove `var countupDate;` that just creates a new variable rather than resetting the variable you already defined. — Heretic Monkey, Oct 01 '20 at 13:40
Does this answer your question? [What is the scope of variables in JavaScript?](https://stackoverflow.com/questions/500431/what-is-the-scope-of-variables-in-javascript) — Heretic Monkey, Oct 01 '20 at 13:45

score 0 · Answer 1 · answered Oct 01 '20 at 13:53

The main problem is your countupDate used in interval has global scope, so redefine it in reset... won't affect your expected variables

function resetcountupDate() {
  countupDate = new Date() // just this only
}

Furthermore, I suggest some additional changes to make it feel more like reseting. First, I made a function that return an interval, so when reset, it first stop the interval. Second, I also made display a separated function, along with making days, hours, minutes, seconds global scope, so when reset, I also set all of these variables to 0, display the initial, and start the interval again

function resetcountupDate() {
  clearInterval(x)
  days = hours = minutes = seconds = 0
  display()
  countupDate = new Date()
  x = startInterval()
}

// Set the date we're counting up from
var countupDate = new Date()
var days, hours, minutes, seconds

function display() {
  document.getElementById("demo").innerHTML =
    days + "d " + hours + "h " + minutes + "m " + seconds + "s "
}

function startInterval() {
  return setInterval(function () {
    // Get today's date and time
    var now = new Date().getTime()

    // Find the distance between now and the count up date
    var distance = now - countupDate

    // Time calculations for days, hours, minutes and seconds
    days = Math.floor(distance / (1000 * 60 * 60 * 24))
    hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60))
    minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60))
    seconds = Math.floor((distance % (1000 * 60)) / 1000)

    // Output the result in an element with id="demo"
    display()
  }, 1000)
}

function resetcountupDate() {
  clearInterval(x)
  days = hours = minutes = seconds = 0
  display()
  countupDate = new Date()
  x = startInterval()
}

// Update the count up every 1 second
var x = startInterval()

@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@100&display=swap');
p {
  font-family: 'Roboto Slab', serif;
  text-align: center;
  font-size: 60px;
  margin-top: 0px;
}

<!DOCTYPE HTML>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1" , charset="UTF-8">
</head>

<body>

  <p id="demo"></p>

  <p></p>
  <p></p>
  <p></p>
  <p></p>

  <input type=button value="Show Time" onclick="resetcountupDate();">

</body>

</html>

Update date object assigned variable

1 Answers1