javascript - Doing math with Time using js -

i have following code:

html:

<form onsubmit="return false;">     <div class="col-5">         <label>             page time             <input id="pagetime" name="pagetime" type="time" step="1" tabindex="9">         </label>     </div>     <div class="col-5">         <label>             ack time             <input id="acktime" name="acktime" type="time" step="1" tabindex="10">         </label>     </div>     <div class="col-5">         <label>             arrival time             <input id="arrivaltime" name="arrivaltime" type="time" step="1" tabindex="11">         </label>     </div>     <div class="col-5">         <label>             start replace / root cause found             <input id="startreplace" name="startreplace" type="time" step="1" tabindex="12">         </label>     </div>     <div class="col-5">         <label>             replaced / repair completed             <input id="replaced" name="replaced" type="time" step="1" tabindex="13">         </label>     </div>     <div class="col-4">         <label>             engagement             <input type="text" id="engagement" name="engagement" value="" readonly="readonly" />         </label>     </div>     <div class="col-4">         <label>             arrival             <input type="text" id="arrival" name="arrival" value="" readonly="readonly" />         </label>     </div>     <div class="col-4">         <label>             investigation             <input type="text" id="investigation" name="investigation" value="" readonly="readonly" />         </label>     </div>     <div class="col-4">         <label>             mitigate             <input type="text" id="mitigate" name="mitigate" value="" readonly="readonly" />         </label>     </div>      <div class="col-1" style="text-align: center">         <label>             total ops phases             <input type="text" name="totalopsphases" id="totalopsphases" value="" readonly="readonly" />         </label>     </div>     <div class="col-submit">         <button class="submitbtn" tabindex="14" onclick="opstime();">do math</button>     </div> </form> 

js:

function toseconds(time_str) {     // extract hours, minutes , seconds     var parts = time_str.split(':');     var sum = 0;     // compute  , return total seconds     (c = 0; c <= 2; c++) {         if (c === 0) {             sum += parts[0] * 3600;         } else if (c === 1) {             sum += parts[1] * 60;         } else if (c === 2) {             if (parts[2] !== 'undefined') {                 sum += parts[2];             }         }     }     return sum; } function opstime() {     var time = [document.getelementbyid('pagetime').value, document.getelementbyid('acktime').value, document.getelementbyid('arrivaltime').value, document.getelementbyid('startreplace').value, document.getelementbyid('replaced').value];     // created array math :)     // array mapping:     // 0 = pagetime     // 1 = acktime     // 2 = arrivaltime     // 3 = startreplacetime     // 4 = replacedtime      (i = 0; <= 4; i++) {         if (i === 4) {             var start = time[0];             var end = time[4];         } else {             start = time[i];             end = time[i + 1];         }         var startsec = toseconds(start);         var endsec = toseconds(end);         var difference = math.abs(endsec - startsec);         // format time differnece         var result = [             math.floor(difference / 3600), // hour has 3600 seconds             math.floor((difference % 3600) / 60), // minute has 60 seconds             difference % 60         ];         // 0 padding , concatation         result = result.map(function (v) {             return v < 10 ? '0' + v : v;         }).join(':');         var res = [];         res[i] = result;     }      document.getelementbyid('engagement').value = res[0];     document.getelementbyid('arrival').value = res[1];     document.getelementbyid('investigation').value = res[2];     document.getelementbyid('mitigate').value = res[3];     document.getelementbyid('totalopsphase').value = res[4]; } 

what i'm trying pick times filled in inputs , show difference in inputs boxes below.

• engagement should time difference between page time , ack time;
• arrival should time difference between ack time , arrival time;
• investigation should time difference between arrival , start replace time;
• mitigate should time difference between start replace , replaced time;
• total ops phases should time difference between replaced , page time.

i'm stuck on code above 8 hours, changed lot of things trying math , put each time difference inside array , use fill inputs, seems array isn't filled data. unfortunately have use seconds well, , couldn't find material different solutions calculate difference of times using it.

i glad if can see way solve matter.

thanks in advance!

ps: tried insert print of form don't have reputation needed.

the type="time" attribute supported chrome, not firefox or internet explorer should using compatibility library these or 1 of own making. if want use chrome can use valueasnumber:

v.valueasnumber 56013000 v.valueasdate thu jan 01 1970 10:33:33 gmt-0500 (est) v.value "15:33:33" 

note chrome console show these options auto suggest.

also jsfiddle