空值導致NaN結果

Question

當輸入字段爲空時，我的表單顯示NaN。你能幫我解決這個問題嗎？這裏是我的代碼：

function dailyRate() { 
 
    var monthlyRate = parseInt(document.getElementById("txt1").value); 
 
    var months = 12; 
 
    var workingDays = parseInt(document.getElementById("txt2").value); 
 
    var totalDailyRate = (monthlyRate * months)/workingDays; 
 
    document.getElementById("totalRate").innerHTML = Math.round(totalDailyRate); 
 
} 
 

 
$(document).ready(function() { 
 
    $("#mainForm").submit(function(e){ 
 
     e.preventDefault(); 
 
    }); 
 
    $("#txt2, #txt1").keydown(function (e) { 
 
     // Allow: backspace, delete, tab, escape, enter and . 
 
     if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 110, 190]) !== -1 || 
 
      // Allow: Ctrl+A 
 
      (e.keyCode == 65 && e.ctrlKey === true) || 
 
      // Allow: Ctrl+C 
 
      (e.keyCode == 67 && e.ctrlKey === true) || 
 
      // Allow: Ctrl+X 
 
      (e.keyCode == 88 && e.ctrlKey === true) || 
 
      // Allow: home, end, left, right 
 
      (e.keyCode >= 35 && e.keyCode <= 39)) { 
 
      // let it happen, don't do anything 
 
       return; 
 
     } 
 
     // Ensure that it is a number and stop the keypress 
 
     if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) { 
 
      e.preventDefault(); 
 
     } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<form name="mainForm" id="mainForm" action="" onsubmit="return dailyRate()" method="post"> 
 
<input type="text" id="txt1" name="text1" placeholder="monthlyrate"> 
 
<input type="text" id="txt2" name="text2" placeholder="workingDays"> 
 
<p id="alerttext"></p> 
 
<button>Submit</button> 
 
<p id="totalRate"></p> 
 
</form>

Answer 1

檢查值NaN與否。如果是NaN，也可以將該值設置爲0或顯示錯誤消息：

var textField1 = document.getElementById("txt1"); 
var textField2 = document.getElementById("txt2"); 

var monthlyRate = parseInt(textField1.value); 
var workingDays = parseInt(textField2.value); 

if (isNaN(monthlyRate)) { 
    textField1.value = 0; 
    monthlyRate = 0; 
} 

if (isNaN(workingDays)) { 
    textField2.value = 0; 
    monthlyRate = 0; 
} 

OR：

if (isNaN(totalDailyRate)) { 
    document.getElementById("totalRate").innerHTML = "Please enter valid numbers"; 
} else { 
    document.getElementById("totalRate").innerHTML = Math.round(totalDailyRate); 
} 

建議：如果您使用<input type="number">，現代瀏覽器增加顯示控件和減少輸入字段中的數字。

Answer 2

函數parseInt()如果內容不是數字，則返回NaN，在您的情況下，如果控件爲空，getElementById的返回將返回一個空字符串。所以，或許你應該使用它，像以前一樣執行一些驗證：

var monthlyRate = parseInt(document.getElementById("txt1").value); 
var months = 12; 
var workingDays = parseInt(document.getElementById("txt2").value); 

if (isNaN(monthlyRate) || isNaN(workingDays)) { 
    document.getElementById("totalRate").innerHTML = 'No value'; 
    return; 
} 

在上面的例子中，如果任何值無效，則totalRate會顯示「沒有價值」。