빈 값은 NaN 결과가됩니다.

Question

입력 필드가 비어있을 때 내 양식에 NaN이 표시됩니다. 이 문제를 해결하도록 도와 줄 수 있습니까? 값이 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

확인 : 여기에 내 코드입니다.

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); 
} 

제안 : 그것은 NaN 인 경우, 오류 메시지가 값을 0으로 설정하거나 표시 할 수 있습니다 당신이 <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는 '어떤 값'을 표시하지 않습니다.