Ausgabe von Textfeld zeigt NaN auf Berechnungen an

Question

Ich habe eine Situation, in der einige Berechnungen durchgeführt werden sollten. Ich habe ein paar Zeilen Formel erstellt, um die Szenarien in Calc() Funktion zu berechnen.

Die Berechnungen funktionieren gut, aber ich habe Probleme mit dem NaN Ausgang. Wenn ich nichts eingabe und auf die Calculate Schaltfläche klicke, zeigt das Textfeld eine Ausgabe von NaN an. Ich verstehe, dass NaN zeigt keine A-Nummer, aber ich bin hilflos bei der Lösung dieses Problems.

Ich würde eine Ausgabe von 0,00 anstelle von NaN wollen. Brauche Hilfe dazu.

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> 
 
\t   <td class="cent"><input type="text" value="153" align="center" name="qty" id="qty5" maxlength="6" size="4" readonly="readonly"/></td> 
 
\t   <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> 
 
\t   <td class="cent"><input type="text" value="0" align="center" name="qty" id="qty6" maxlength="6" size="4" readonly="readonly"/></td> 
 
\t   <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> 
 
\t   <td class="cent"><input type="text" value="68" align="center" name="qty" id="qty7" maxlength="6" size="4" readonly="readonly"/></td> 
 
\t   <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> 
 
\t   <td class="cent"><input type="text" value="53" align="center" name="qty" id="qty8" maxlength="4" size="4" readonly="readonly"/></td> 
 
\t   <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> 
 
\t   <td class="cent"><input type="text" value="50" align="center" name="qty" id="qty9" maxlength="6" size="4" readonly="readonly"/></td> 
 
\t   <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> 
 
\t   <td class="cent"><input type="text" value="43" align="center" name="qty" id="qty10" maxlength="6" size="4" readonly="readonly"/></td> 
 
\t   <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> 
 
\t   <td class="cent"><input type="text" value="60" align="center" name="qty" id="qty11" maxlength="6" size="4" readonly="readonly"/></td> 
 
\t   <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>

Answer 1

Sie können Ihren Wert einen Standardwert geben.

dh

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

Answer 2

Das Ergebnis NaN von Division durch Null an dieser Linie gekommen ist [nur eine Vertiefung hat, um leicht zu erkennen]

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

In Chrom devtools, können Sie dies, indem sie einen Bruch setzen Punkt und dann den Ausdruck von der Maus Auswahl des Wertes

So zu sehen, müssen Sie die Logik codieren, die earnDays zu finden, wenn document.getElementById ('numHeadC ‚) .value ist‚‘(emty string), die 0

wie folgt konvertiert, wie Sie sein 0.0 wollte:

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