CODEWITHSUNDEEP
javascripthtml
Ryan M
Ryan M

Reputation: 13

Add a button to change a value within script with the current date

I'm a beginner and I'm working on creating a page that will display a count up timer in days since a previous date. I will be using this at work to display the amount of days since an injury. The issue that I am having is adding a button that resets the timer by updating a value within my script with the current date.

This is what I have so far

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="utf-8">
    <meta http-equiv="refresh" content="60" />
    <title>Days Without Injury</title>
    <link rel="stylesheet" href="stylesheets/styles.css">
  </head>

  <body>
    <h1 style="font-size:100px;"><b>Days Without Injury</b></h1>

    <div class="countup" id="countup1">
      <span class="timeel days">00</span>
      <span class="timeel timeRefDays">days</span>
    </div>

    <button id="reset-btn">
      <img src="images/lantek.jpeg" alt="Lantek Logo" style="display:block;margin- 
        left:auto;margin-right:auto;padding:0;width:800px;height:300px;">;
    </button>

    <script>
      window.onload = function() {
        // Month Day, Year Hour:Minute:Second, id-of-element-container
        countUpFromTime("Jul 8, 2019 12:00:00", 'countup1'); // ****** Change this line!
      };

      function countUpFromTime(countFrom, id) {
        countFrom = new Date(countFrom).getTime();
        var now = new Date(),
          countFrom = new Date(countFrom),
          timeDifference = (now - countFrom);

        var secondsInADay = 60 * 60 * 1000 * 24,
          secondsInAHour = 60 * 60 * 1000;

        days = Math.floor(timeDifference / (secondsInADay) * 1);
        hours = Math.floor((timeDifference % (secondsInADay)) / (secondsInAHour) * 1);
        mins = Math.floor(((timeDifference % (secondsInADay)) % (secondsInAHour)) / (60 * 1000) *
          1);
        secs = Math.floor((((timeDifference % (secondsInADay)) % (secondsInAHour)) % (60 *
          1000)) / 1000 * 1);

        var idEl = document.getElementById(id);
        idEl.getElementsByClassName('days')[0].innerHTML = days;
        idEl.getElementsByClassName('hours')[0].innerHTML = hours;
        idEl.getElementsByClassName('minutes')[0].innerHTML = mins;
        idEl.getElementsByClassName('seconds')[0].innerHTML = secs;

        clearTimeout(countUpFromTime.interval);
        countUpFromTime.interval = setTimeout(function() {
            countUpFromTime(countFrom, id);
          },
          1000);
      }

    </script>

  </body>

</html>

Upvotes: 1

Views: 56

Answers (1)

JorgeObregon
JorgeObregon

Reputation: 3320

Update the variable where you have the original time, and call the script again. Working example below:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv = "refresh" content = "60" />
    <title>Days Without Injury</title>
    <link rel="stylesheet" href="stylesheets/styles.css">
</head>

<body>
    <h1 style="font-size:100px;"><b>Days Without Injury</b></h1>

    <div class="countup" id="countup1">
        <span class="timeel days">00</span>
        <span class="timeel hours">00</span>
        <span class="timeel minutes">00</span>
        <span class="timeel seconds">00</span>
        <span class="timeel timeRefDays">days</span>
    </div>

    <button id="reset-btn">
        reset
    </button>

    <script>
      var timeToCountUpFrom = "Jul 8, 2019 12:00:00"
        window.onload = function() {
        // Month Day, Year Hour:Minute:Second, id-of-element-container
        countUpFromTime(timeToCountUpFrom, 'countup1'); // ****** Change this line!
        document.getElementById('reset-btn').addEventListener('click', function(){
          timeToCountUpFrom = new Date()
          countUpFromTime(timeToCountUpFrom, 'countup1'); // ****** Change this line!
        })
       };
    function countUpFromTime(countFrom, id) {
        countFrom = new Date(countFrom).getTime();
       var now = new Date(),
          countFrom = new Date(countFrom),
          timeDifference = (now - countFrom);

        var secondsInADay = 60 * 60 * 1000 * 24,
             secondsInAHour = 60 * 60 * 1000;

         days = Math.floor(timeDifference / (secondsInADay) * 1);
         hours = Math.floor((timeDifference % (secondsInADay)) / (secondsInAHour) * 1);
         mins = Math.floor(((timeDifference % (secondsInADay)) % (secondsInAHour)) / (60 * 1000) 
         * 1);
        secs = Math.floor((((timeDifference % (secondsInADay)) % (secondsInAHour)) % (60 * 
        1000)) / 1000 * 1);

       var idEl = document.getElementById(id);
       idEl.getElementsByClassName('days')[0].innerHTML = days;
       idEl.getElementsByClassName('hours')[0].innerHTML = hours;
       idEl.getElementsByClassName('minutes')[0].innerHTML = mins;
       idEl.getElementsByClassName('seconds')[0].innerHTML = secs;

      clearTimeout(countUpFromTime.interval);
      countUpFromTime.interval = setTimeout(function(){ countUpFromTime(countFrom, id); }, 
      1000);
    }
    </script>

</body>

</html>

Upvotes: 1

Related Questions