title: Difference between two html time inputs
body: <p>I try to calculate the difference between two HTML time input elements. At the moment that one of the times is changed, there has to be recalculated, unfortunately I can not do this for each other. Who can help me?</p>
  
  <pre><code>    &lt;input type="time"  id="start" value="10:00" &gt;
  &lt;input type="time" id="end" value="12:30" &gt;
  
  &lt;input id="diff"&gt;
  
  
  &lt;script&gt;
  var start = document.getElementById("start").value;
  var end = document.getElementById("end").value;
  
  document.getElementById("start").onchange = function() {diff(start,end)};
  document.getElementById("end").onchange = function() {diff(start,end)};
  
  
  function diff(start, end) {
      start = start.split(":");
      end = end.split(":");
      var startDate = new Date(0, 0, 0, start[0], start[1], 0);
      var endDate = new Date(0, 0, 0, end[0], end[1], 0);
      var diff = endDate.getTime() - startDate.getTime();
      var hours = Math.floor(diff / 1000 / 60 / 60);
      diff -= hours * 1000 * 60 * 60;
      var minutes = Math.floor(diff / 1000 / 60);
  
      return (hours &lt; 9 ? "0" : "") + hours + ":" + (minutes &lt; 9 ? "0" : "") + minutes;
  }
  
  document.getElementById("diff").value = diff(start, end);
  &lt;/script&gt;
  </code></pre>