title: This code returns unexpected identifier in the chrome console.But still this function works and returns the answer.Were have i gone wrong?
body: <p>I have tried to calculate the duration of the shift.It works well for foth day and night shift timings.But y does this returns error.In the console it returns unexpected identifier error but the code works and returns the answer.I think There might be an issue in the if part.But as far as i have seen,I couldnt find anything</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$("#formShiftEndTime").on("change", function() {
    var startHour = $("#formShiftStartTime").val();
    var endHour = $("#formShiftEndTime").val();
    calculate_time(startHour, endHour);
    //   console.log(startHour);
  })
  
  
  function showTime(hours, minutes) {
    return ((hours &lt; 10) ? '0' : '') + hours +
      ':' +
      ((minutes &lt; 10) ? '0' : '') + minutes;
  }
  
  var startHour = $("#formShiftStartTime").val();
  var endHour = $("#formShiftEndTime").val();
  
  function calculate_time(formShiftStartTime, formShiftEndTime) {
  
    if (($("#formShiftStartTime").val()) &lt; ($("#formShiftEndTime").val()))
    {
      startTime = new Date('1-1-1 ' + formShiftStartTime);
      endTime = new Date('1-1-1 ' + formShiftEndTime);
    } else {
      startTime = new Date('1-1-1 ' + formShiftStartTime);
      endTime = new Date('1-2-1 ' + formShiftEndTime);
    }
  
    var difference = endTime - startTime;
    difference /= 1000 * 60; // convert to minutes
    var hours = Math.floor(difference / 60);
    var mins = Math.floor(difference % 60);
  
    document.getElementById('formDuration').value = showTime(hours, mins);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;form id="calculate" action=""&gt;
    &lt;div&gt;
      &lt;p&gt;&lt;label&gt;Start Hour: &lt;input type="time" name="formShiftStartTime" id="formShiftStartTime"/&gt;&lt;/label&gt;&lt;/p&gt;
      &lt;p&gt;&lt;label&gt;End Hour: &lt;input type="time" name="formShiftEndTime" id="formShiftEndTime" /&gt;&lt;/label&gt;&lt;/p&gt;
  
      &lt;div class="form-group"&gt;
        &lt;label class="col-md-4 control-label"&gt;Duration&lt;/label&gt;
        &lt;div class="col-md-8"&gt;
          &lt;input type="text" class="form-control " id="formDuration" name="formDuration"&gt;
  
        &lt;/div&gt;
  
      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>