I made a little page to track project times and write them into a database. I have two input fields for start and end time that will be calculated via a small JS script and the help of moment.js to show the total hrs. When there are values in the database already they are placed into the input fields as default value. When I now just tab through the input fields the script will calculate the value 0. I inspected the DOM and on both input fields it is correctly showing the right timestamps for both value and defaultvalue. What am I missing, and why is the JS triggered if I set it to be onChange?
JS
function TimeDifference(a) {
var start = moment(document.getElementById('Start_'+a).value,'HH:mm');
var stop = moment(document.getElementById('Finish_'+a).value,'HH:mm');
document.getElementById('sum'+a).value = moment.duration(stop-start).asHours();}
HTML
<input class='timebox' type='text' id='Start_" . $i . "' onkeypress='return isNumberKey(event) ' onChange='TimeDifference(" . $i . ")' value='{$db_start}' >
<input class='timebox' type='text' id='Finish_" . $i . "' onkeypress='return isNumberKey(event)' onChange='TimeDifference(" . $i . ")' value='{$db_stop}'>
<input id='sum" . $i . "' class='sumbox' readonly disabled='disabled' style='border:0px;'>