jQuery script displays NaN in textboxes, How can I remove the NaN?

Question

I'm using the jQuery script below to calculate the hours between a start time and a stop time and populate the value in a text box. As you can see in the image below, the issue is as soon as the form is pulled up the lineTotal textbox is already populated with NaN and I want it gone. I'm not sure where in the code I need to make the modification.

$(function() {
  function calculate() {
    var start = $(".start1").val().split(':');
       stop = $(".stop1").val().split(':');
    var hours1 = parseInt(start[0], 10);
      hours2 = parseInt(stop[0], 10);
      mins1 = parseInt(start[1], 10);
      mins2 = parseInt(stop[1], 10);
    var hours = hours2 - hours1, mins = 0;
    if (hours < 0) hours = 24 + hours;
    if (mins2 >= mins1) {
      mins = mins2 - mins1;
    } else {
      mins = (mins2 + 60) - mins1;
      hours--;
    }
    mins = mins / 60; // take percentage in 60
    hours += mins;
    hours = hours.toFixed(2);
    $(".lineTotal1").val(hours);
  }
  $(".start1,.stop1").change(calculate);
  calculate();
});

#formInput {
 background:#FFFFCC;
 cellspacing: 0;
 cellpadding: 0;
 border-collapse: collapse;
 border-spacing: 0; /* cellspacing */

}
.auto-style8 {
 border-style: solid;
 border-width: 1px;
 background-color: #A5C4F1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr> 
  <th style="width: 57px; height: 22px;" class="auto-style8">START</th>
 <th style="width: 52px; height: 22px;" class="auto-style8">STOP</th>
 <th style="width: 87px; height: 22px;" class="auto-style8">Line Total</th>
</tr>
<tr>
 <td cellspacing="0" cellpadding="0">
 <input id="formInput" type="time" class="start1" name="start1" style="width: 69px"/></td>
 <td>
 <input id="formInput" type="time" class="stop1" name="stop1" style="width: 66px"/></td><td>
 <input id="formInput" type="text" class="lineTotal1" name="lineTotal1" style="width: 89px"/></td>
</tr>
</table>

score 1 · Accepted Answer · answered Aug 19 '18 at 20:32

The problem is because the result of parseInt() on the empty values in the boxes by default is NaN. To fix this you can coerce that to 0 by using || 0 at the end of each line you use parseInt(), like this:

$(function() {
  function calculate() {
    var start = $(".start1").val().split(':');
    stop = $(".stop1").val().split(':');

    var hours1 = parseInt(start[0], 10) || 0;
    hours2 = parseInt(stop[0], 10) || 0;
    mins1 = parseInt(start[1], 10) || 0;
    mins2 = parseInt(stop[1], 10) || 0;

    var hours = hours2 - hours1, mins = 0;
    
    if (hours < 0)
      hours = 24 + hours;
      
    if (mins2 >= mins1) {
      mins = mins2 - mins1;
    } else {
      mins = (mins2 + 60) - mins1;
      hours--;
    }
    
    mins = mins / 60; // take percentage in 60
    hours += mins;
    hours = hours.toFixed(2);
    $(".lineTotal1").val(hours);
  }
  $(".start1,.stop1").change(calculate);
  calculate();
});

#formInput {
  background: #FFFFCC;
  border-collapse: collapse;
  border-spacing: 0;
}

.auto-style8 {
  border-style: solid;
  border-width: 1px;
  background-color: #A5C4F1;
}

table th {
  width: 57px;
  height: 22px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <th class="auto-style8">START</th>
    <th class="auto-style8">STOP</th>
    <th class="auto-style8">Line Total</th>
  </tr>
  <tr>
    <td cellspacing="0" cellpadding="0">
      <input id="formInput" type="time" class="start1" name="start1" style="width: 69px" /></td>
    <td>
      <input id="formInput" type="time" class="stop1" name="stop1" style="width: 66px" /></td>
    <td>
      <input id="formInput" type="text" class="lineTotal1" name="lineTotal1" style="width: 89px" /></td>
  </tr>
</table>

Thanks Rory, I tried that before posting but wasn't able to get it to work. I see it works in the code snippet but when I make the changes to my code and run it on my server I still get NaN. I guess I will run with what you've answered and figure out what I've got going on that's causing the problem. Again thanks for the quick response. — Jason, Aug 19 '18 at 20:49

jQuery script displays NaN in textboxes, How can I remove the NaN?

1 Answers1