Elapsed Time using JavaScript

Question

I have a small piece of code that I want to accomplish 3 things on:

User Enters Birthday
User is able to see current date
When user clicks button, they are given the time elapsed between their birthday and now (i.e. current time - birthday).

The trouble I am having is that when the button is clicked all I get is NaN. I am not sure how to proceed at this point.

        <li><label>Enter Your Birthday</label></li>
        <li><input type="date" name="field1" id="field1"></li>

        <li><label for="date">Current Date</label></li>
        <script id="curDate">
            var d = new Date();
            document.write(d);
            var bDay = new Date(document.quiz.field1);
            var eTime = d - bDay;
            function calcDate(eTime) {
                document.write(eTime);
            }
        </script>
        <li><input type="button" value="Click" onclick="calcDate(eTime)"></li>

`new Date(document.quiz.field1)` <-- `field1` is the input. So you are trying to convert the input to a number, not its value — epascarello, Nov 08 '18 at 19:56

William Juan · Accepted Answer · 2018-11-08T20:27:50.273

2

You can use document.getElementById('field1').value to get the value of the input and pass that in to new Date to create a date object. You can then get the difference between that and today to get the elapsed time.

var diff = Math.abs(new Date() - new Date(document.getElementById('field1').value));

edited Nov 08 '18 at 20:27

answered Nov 08 '18 at 19:59

William Juan

1,395
1
7
10

To improve your answer, please [edit] your answer to add a bit of explanation how this works, and why this is the best solution to OP's problem. – grooveplex Nov 08 '18 at 20:20
@WilliamJuan thank you, this makes more sense now. I will format it for give me years months days etc. – Lily V. Nov 08 '18 at 20:48

Kamil Kiełczewski · Answer 2 · 2018-11-08T21:49:25.683

0

Your code have a lot of bugs - Try this (I only upgrade your code to work - it still looks ugly):

<li><label>Enter Your Birthday</label></li>
<li><input type="date" name="field1" class="field1"></li>
<li><label for="date">Current Date</label></li>
<li><span class="dateCalc">x</span></li>
<li><input type="button" value="Click" onclick="calcDate()"></li>

<script >
  var d = new Date();
  document.write(d);

  window.calcDate = function calcDate() // we bind to window.calcDate for fiddle
  {
    var bDay = new Date(document.querySelector(".field1").value);
    var eTime = d - bDay; // diffrence in miliseconds (can be mins if birth date is from future)

    document.querySelector(".dateCalc").innerHTML = eTime+ ' [ms]';
  }
</script>

Working example.

edited Nov 08 '18 at 21:49

answered Nov 08 '18 at 20:07

Kamil Kiełczewski

85,173
29
368
345

I should clarify that I am trying to create functionality. What are the bugs you mentioned, could you clarify? – Lily V. Nov 08 '18 at 20:32
@LilyV. Of course: 1. wrong way of reading `bDay` (not work), 2. read `bDay` and `eTime` calc in wrong place-time (should be after click- so inside function), 3. write result in wrong way (`document.write` delete whole page), 4 function `calcDate` should not have argument. 5. You manipulate html doc in wrog way e.g. `document.write(d)`. 6 js code mixed with html. Additionaly in my opinion the value of `eTime = d - bDay` is right becouse you not precise what time format you wanna get (so you have in [ms]) and we don't need to take absolute value of it (in case of distinct future dates) – Kamil Kiełczewski Nov 08 '18 at 21:45

Elapsed Time using JavaScript

2 Answers2