文本框的输出在计算中显示 NaN答案

【问题标题】：Output of Text Box Displays NaN on Calculations文本框的输出在计算中显示 NaN
【发布时间】：2017-10-17 14:12:56
【问题描述】：

我遇到了需要执行一些计算的情况。我创建了几行公式来计算Calc() 函数中的场景。

计算工作正常，但我遇到了NaNoutput 的问题。当我不输入任何内容并单击Calculate 按钮时，文本框会显示NaN 的输出。我知道NaN 表示不是数字，但我无法解决这个问题。

我希望输出 0.00 而不是 NaN。在这方面需要帮助。

function Calc() {
    let arr = document.getElementsByName('qty');
    let tot = 0;
    for (let i = 0; i < arr.length; i++) {
        let radios = document.getElementsByName("group" + (i + 1));
        for (let j = 0; j < radios.length; j++) {
            let radio = radios[j];
            if (radio.value == "Yes" && radio.checked) {
                tot += parseInt(arr[i].value);
            }
         }
    }

    document.getElementById('total').value = tot;
    var stdHour = ((tot * 1.15) / 3600);
    document.getElementById('stdHour').value = stdHour.toFixed(4);
    var earnHour = ((tot * 1.15) / 3600) * document.getElementById('unitNum').value;
    document.getElementById('earnHour').value = earnHour.toFixed(3);
    document.getElementById('hc').value = ((earnHour / 19.8) * document.getElementById('numDays').value).toFixed(3);
    var earnDays = ((document.getElementById('unitNum').value / ((document.getElementById('numHeadC').value / stdHour) * 6.6)) / 3);
    document.getElementById('days').value = earnDays.toFixed(3);
    document.getElementById('perday').value = ((document.getElementById('numHeadC').value / stdHour * 6.6) * 3).toFixed(1);
    document.getElementById('hcperday').value = ((document.getElementById('output').value / 19.8) * stdHour).toFixed(3);
}

<h3>
    <B>Extreme Temperature (Cold Temp)</B>
</h3>
<table class="table2" style="width:60%" align="center">
    <tr>
        <td></td>
        <td class="cent"><b>Value</b></td>
        <td class="cent"><b>Yes</b></td>
        <td class="cent"><b>No</b></td>
    </tr>

    <tr>
        <label id="group5">
            <td>ATE Labview RF Testing Extreme</td>
	        <td class="cent"><input type="text" value="153" align="center" name="qty" id="qty5" maxlength="6" size="4" readonly="readonly"/></td>
	        <td class="cent"><input type="radio" name="group5" value="Yes" checked="checked"></td>
          <td class="cent"><input type="radio" name="group5" value="No"></td>
        </label>
    </tr>

    <tr>
        <label id="group6">
            <td>User Interface Extreme</td>
	        <td class="cent"><input type="text" value="0" align="center" name="qty" id="qty6" maxlength="6" size="4" readonly="readonly"/></td>
	        <td class="cent"><input type="radio" name="group6" value="Yes"></td>
            <td class="cent"><input type="radio" name="group6" value="No" checked="checked"></td>
        </label>
    </tr>

    <tr>
        <label id="group7">
            <td>Mic Talk Internal Extreme</td>
	        <td class="cent"><input type="text" value="68" align="center" name="qty" id="qty7" maxlength="6" size="4" readonly="readonly"/></td>
	        <td class="cent"><input type="radio" name="group7" value="Yes" checked="checked"></td>
           <td class="cent"><input type="radio" name="group7" value="No"></td>
        </label>
    </tr>

    <tr>
         <label id="group8">
             <td>Mic Talk External Extreme</td>
	         <td class="cent"><input type="text" value="53" align="center" name="qty" id="qty8" maxlength="4" size="4" readonly="readonly"/></td>
	         <td class="cent"><input type="radio" name="group8" value="Yes" checked="checked"></td>
             <td class="cent"><input type="radio" name="group8" value="No"></td>
          </label>
     </tr>

     <tr>
         <label id="group9">
             <td>Desense Test</td>
	         <td class="cent"><input type="text" value="50" align="center" name="qty" id="qty9" maxlength="6" size="4" readonly="readonly"/></td>
	         <td class="cent"><input type="radio" name="group9" value="Yes" checked="checked"></td>
             <td class="cent"><input type="radio" name="group9" value="No"></td>
         </label>
     </tr>

     <tr>
         <label id="group10">
             <td>Tx Stability</td>
	         <td class="cent"><input type="text" value="43" align="center" name="qty" id="qty10" maxlength="6" size="4" readonly="readonly"/></td>
	         <td class="cent"><input type="radio" name="group10" value="Yes" checked="checked"></td>
             <td class="cent"><input type="radio" name="group10" value="No"></td>
          </label>
    </tr>

    <tr>
         <label id="group11">
             <td>Microphonic Test</td>
	         <td class="cent"><input type="text" value="60" align="center" name="qty" id="qty11" maxlength="6" size="4" readonly="readonly"/></td>
	         <td class="cent"><input type="radio" name="group11" value="Yes" checked="checked"></td>
             <td class="cent"><input type="radio" name="group11" value="No"></td>
         </label>
     </tr>
</table>
<br><br>

<!---Number of units--->
<br><br>
<table class="resultsTbl">

  <tr>
    <th colspan="2">
      <h4>Enter The Number of Units : <input type="text" id="unitNum"></h4>
    </th>
  </tr>

  <tr>
    <td>Total</td>
    <td class="left"><input type="text" name="total" id="total" align="center" /> Seconds</td>
  </tr>

  <tr>
    <td>Standard Hour</td>
    <td class="left"><input type="text" name="stdHour" id="stdHour" align="center" /> Hour</td>
  </tr>

  <tr>
    <td>Earn Hour</td>
    <td class="left"><input type="text" name="earnHour" id="earnHour" /> Hour</td>
  </tr>

</table>

<br><br>
<!--Scenario 1-->
<table class="resultsTbl">

  <tr>
    <th colspan="2" class="scenario1"><input type="checkbox" value="select" align="center" id="check1"> Scenario 1</th>
  </tr>

  <tr>
    <td colspan="2" class="cent">Calculate The Number of Head Count When Days Are Fixed</td>
  </tr>

  <tr>
    <td>Number of Days</td>
    <td class="left"><input type="text" id="numDays" /></td>
  </tr>

  <tr>
    <td>Head Count</td>
    <td class="left"><input type="text" name="hc" id="hc" /> Per Shift</td>
  </tr>

</table>
<br><br>
<!--End of Form For Scenario 1-->
<table class="resultsTbl">

  <tr>
    <th colspan="2" class="scenario2"><input type="checkbox" value="select" align="center" id="check2"> Scenario 2</th>
  </tr>

  <tr>
    <td colspan="2" class="cent">Calculate The Number of Days When Head Counts Are Fixed</td>
  </tr>

  <tr>
    <td>Number of Head Count</td>
    <td class="left"><input type="text" id="numHeadC" /></td>
  </tr>

  <tr>
    <td>Number of Days</td>
    <td class="left"><input type="text" name="days" id="days" /> Days</td>
  </tr>

  <tr>
    <td>Output Per Day</td>
    <td class="left"><input type="text" name="perday" id="perday" /> Per Day</td>
  </tr>

</table>
<br><br>

<table class="resultsTbl">

  <tr>
    <th colspan="2" class="scenario3"><input type="checkbox" value="select"> Scenario 3</th>
  </tr>

  <tr>
    <td colspan="2" class="cent">Calculate The Number of Head Counts According to The Daily Output</td>
  </tr>

  <tr>
    <td>Daily Output</td>
    <td class="left"><input type="text" id="output" /></td>
  </tr>

  <tr>
    <td>HC 2</td>
    <td class="left"><input type="text" name="hcperday" id="hcperday" /> Per Shift</td>
  </tr>

</table>
<br><br><br>
<form align="center">
  <div id="button"><button type="button" name="button1" onClick="Calc()" class="button button1">Calculate</button></div>
</form>

【问题讨论】：

您可以检查文本框的值是否为空，然后再将其传递给计算和`if(empty){ document.getElementById("total".value = 0.00} else { //your计算}.
Convert NaN to 0 in javascript的可能重复
if(Element.value !== '')

标签： javascript html

【解决方案1】：

你可以给你的值一个默认值。即

var earnDays = ((document.getElementById('unitNum').value / ((document.getElementById('numHeadC').value / stdHour) * 6.6)) / 3) || 0.0;

【讨论】：

【解决方案2】：

结果 NaN 来自这一行的除以零 [只是做了一个缩进很容易发现]

var earnDays = ((
                  document.getElementById('unitNum').value / 
                   ((document.getElementById('numHeadC').value / stdHour) *6.6) 
                 )
           / 3 );

在 chrome devtools 中，您可以通过放置一个断点然后用鼠标选择表达式来查看值来找到它

因此，当 document.getElementById('numHeadC').value 为 ''（空字符串）并转换为 0 时，您必须编写逻辑来查找 EarnDays。

就像你想成为 0.0 一样：

var earnDays = 0.0;
if (document.getElementById('numHeadC').value)
    earnDays = ((document.getElementById('unitNum').value / ((document.getElementById('numHeadC').value / stdHour) * 6.6)) / 3);

【讨论】：