jQuery 脚本在文本框中显示 NaN，如何删除 NaN？ [复制]

Posted 2023-03-11

【中文标题】jQuery 脚本在文本框中显示 NaN，如何删除 NaN？ [复制]

【英文标题】：jQuery script displays NaN in textboxes, How can I remove the NaN? [duplicate]

【发布时间】：2019-01-26 01:02:38

【问题描述】：

我正在使用下面的 jQuery 脚本来计算开始时间和停止时间之间的小时数，并将值填充到文本框中。正如您在下图中看到的，问题是一旦拉起表单，lineTotal 文本框已经填充了 NaN，我希望它消失。我不确定我需要在代码中的哪个位置进行修改。

$(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>

【参考方案1】：

问题是因为parseInt() 对框中空值的结果默认为NaN。要解决此问题，您可以在使用 parseInt() 的每一行末尾使用 || 0 将其强制为 0，如下所示：

$(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>

【讨论】：

感谢 Rory，我在发布之前尝试过，但无法使其正常工作。我看到它在代码 sn-p 中有效，但是当我对代码进行更改并在我的服务器上运行它时，我仍然得到 NaN。我想我会按照您的回答运行，并找出导致问题的原因。再次感谢您的快速响应。