Как получить разницу между 2 раза в часах и минутах, используя функцию javascript .change?

Question

Время выбирается пользователем, после того, как пользователь выбрал оба раза, флажок длительности должен автоматически рассчитывать продолжительность времени и отображать продолжительность в текстовой области длительности. Пожалуйста, посмотрите на мой код ... Спасибо. Я поставил оповещение для проверки, но до сих пор не могу получить продолжительность оповещения.

$(document).ready(function() {
  var stime = document.querySelector("#FromTime"),
    etime = document.querySelector("#ToTime"),
    duration = document.querySelector("#duration");

  stime.onchange = etime.onchange = function() {
    if (!stime.value || !etime.value) {
      return;
    }
    var sTime = stime.value.split(":"),
      eTime = etime.value.split(":"),
      minutes = (eTime[0] * 60 + +eTime[1]) - (sTime[0] * 60 + +sTime[1]),
      hours = Math.floor(minutes / 60);
    if (minutes < 1) {
      return duration.innerHTML = "The ending time must be bigger than the starting time";
    }
    duration.innerHTML = `Duration: ${hours} hours and ${minutes % 60} minutes`
  };

});

<div class="input-field col m6 s12">
  <label for="FromTime">From Time : </label></br>
  </br>
  <input type="time" name="FromTime" id="FromTime" autocomplete="off" required>
</div>

<div class="input-field col m6 s12">
  <label for="ToTime">To Time : </label></br>
  </br>
  <input type="time" name="ToTime" id="ToTime" autocomplete="off" required>
</div>

<div class="input-field col s12">
  <label for="duration" name="duration" id="duration">Duration (Hour): </label></br>
  </br>
  <input type="text" name="duration" id="duration" style="width:70px; height:35px;" required>
</div>

Answer 1

В вашем коде есть несколько несоответствий, попробуйте следующее, поместите расчет длительности в одну функцию и присвойте переменную элементам.

Плюс, вам нужно установить идентификатор для элемента INPUT длительности, а не для элемента ЭТИКЕТКА.

$(document).ready(function(){
    var fromEl = document.getElementById('FromTime');
    var toEl = document.getElementById('ToTime');
    var durationEl = document.getElementById('duration');

    $(fromEl).change(function() {
        toEl.min = fromEl.value;
        updateDuration();
    })

    $(toEl).change(updateDuration);

    function updateDuration() {
        if (!fromEl.value || !toEl.value) return;

        var start = new Date (fromEl.value);
        var end = new Date (toEl.value);

        var durationInMilliseconds = end.getTime() - start.getTime();
        var durationInHours = durationInMilliseconds / (1000 * 60 * 60);
        durationEl.value = durationInHours + ' hours';
    }
});

<div class="input-field col s12">
    <label for="duration" name="duration" >Duration (Hour): </label></br></br>
    <input type="number" name="duration" id="duration" required>
</div>

Answer 2

Здесь я сделал это для вас

var stime = document.querySelector("#start-time"),
  etime = document.querySelector("#end-time"),
  duration = document.querySelector("p");

stime.onchange = etime.onchange = function() {
  if(!stime.value || !etime.value) {
    return;
  }
  var sTime = stime.value.split(":"),
    eTime = etime.value.split(":");
  eTime[0] = eTime[0] == 0 ? 12 : eTime[0] == 12 ? 24 : eTime[0];
  sTime[0] = sTime[0] == 0 ? 12 : sTime[0] == 12 ? 24 : sTime[0];
  var minutes = (eTime[0] * 60 + +eTime[1]) - (sTime[0] * 60 + +sTime[1]),
    hours = Math.floor(minutes / 60);
  if(minutes < 1) {
    duration.innerHTML = "";
    return alert("The ending time must be bigger than the starting time");
  }
  duration.innerHTML = `Duration: ${hours} hours and ${minutes % 60} minutes`
};

<label>From time:</label>
<input type="time" id="start-time">
<label>To time:</label>
<input type="time" id="end-time">
<p></p>