Output of Text Box Displays NaN on Calculations

Question

I have a situation where a few calculations were to be performed. I have created a few lines of formula to calculate the scenarios in Calc() function.

The calculations are working fine but I am having issue with the NaNoutput. When I do not input anything and click on the Calculate button, the text box shows an output of NaN. I understand that NaN indicates Not A Number but I am helpless in solving this issue.

I would want an output of 0.00 instead of NaN. Need help on this.

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>

You can check the text box value is empty or not before passing it to the calculation and the `if(empty){ document.getElementById("total".value = 0.00} else { //your claculation }. — S4NDM4N, Oct 17 '17 at 03:57
Possible duplicate of [Convert NaN to 0 in javascript](https://stackoverflow.com/questions/7540397/convert-nan-to-0-in-javascript) — Agney, Oct 17 '17 at 04:00

score 0 · Answer 1 · answered Oct 17 '17 at 04:02

0

You can give your value a default value. i.e

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

answered Oct 17 '17 at 04:02

JohanP

5,252
2
24
34

adnan2nd · Answer 2 · 2017-10-17T04:53:01.330

The result NaN has come from division by zero at this line [ just did an indentation to spot easily ]

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

In chrome devtools, You can find this by putting a break point and then selecting the expression by your mouse to see the value

So, you have to code the logic to find the earnDays when document.getElementById('numHeadC').value is '' (emty string) which converts to 0.

like this as you wanted to be 0.0 :

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

Output of Text Box Displays NaN on Calculations

2 Answers2