# Calculate time difference from two time inputs in HH:MM:SS format in Javascript

I am trying to calculate the time difference of what a user inputs in my HTML form. The JavaScript in turn should show the user in real time what the difference is while also returning the value into an hidden input.
Here is the HTML:

```<input type="time" id="timeOne" name="timeOne" value="00:00:01" step="1"  onchange="timeFunction()">
<input type="time" id="timeTwo" name="timeTwo" value="00:00:01" step="1"  onchange="timeFunction()">
<b>Time Difference: </b> <p id="timeDifference">--:--:--</p>
<input type="hidden" id="timeDiff" name="timeDiff">
```

How can I go about doing this? I have attempted this method but receive a NaN error. I am also unsure how to put it back together to return the time difference into the hidden input should this work.

```function timeFunction(){
var timeOneValue = document.getElementById("timeOne").value;
var timeTwoValue = document.getElementById("timeTwo").value;

var res = Math.abs(timeTwoValue - timeOneValue) / 1000;
// get hours
var hours = Math.floor(res / 3600) % 24;

// get minutes
var minutes = Math.floor(res / 60) % 60;

// get seconds
var seconds = res % 60;

document.getElementById("timeDifference").innerHTML = (hours + ":" + minutes + ":" + seconds);
}
```

You can split each time string on `:` and then convert it to seconds in order to calculate the difference.

```function timeFunction() {
const getSeconds = s => s.split(":").reduce((acc, curr) => acc * 60 + +curr, 0);
var seconds1 = getSeconds(document.getElementById("timeOne").value);
var seconds2 = getSeconds(document.getElementById("timeTwo").value);

var res = Math.abs(seconds2 - seconds1);

var hours = Math.floor(res / 3600);

var minutes = Math.floor(res % 3600 / 60);

var seconds = res % 60;
document.getElementById("timeDifference").innerHTML = hours + ":" + minutes + ":" + seconds;
}```
```<input type="time" id="timeOne" name="timeOne" value="00:00:01" step="1" onchange="timeFunction()">
<input type="time" id="timeTwo" name="timeTwo" value="00:00:01" step="1" onchange="timeFunction()">
<b>Time Difference: </b>
<p id="timeDifference">--:--:--</p>
<input type="hidden" id="timeDiff" name="timeDiff">```