jqueryを使用するすべてのテキストボックスの合計

Question

ぼかし呼び出しですべてのテキストボックス値を追加します。私は1つのテキストボックスにいくつかの番号を付けます。他のテキストボックス値の値を追加しようとすると、NaNがスローされます。ここで

は私のコード私が間違っているの

function sumOfIncome() { 
 
    var sum = 0; 
 
    $('.add').each(function() { 
 
    sum += parseInt(this.value); 
 
    console.log(sum) 
 
    }); 
 
    $('#netPay').val(sum); 
 
} 
 
$('.add').blur(function() { 
 
    sumOfIncome(); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="form-group row"> 
 
    <div class="col-md-3"> 
 
    <label for="DA" class="col-form-label">DA</label> 
 
    </div> 
 
    <div class="col-sm-2"> 
 
    <input type="number" class="form-control add" id="da" placeholder="DA"> 
 
    </div> 
 
</div> 
 

 
<div class="form-group row"> 
 
    <div class="col-md-3"> 
 
    <label for="HRA" class="col-form-label">HRA</label> 
 
    </div> 
 
    <div class="col-sm-2"> 
 
    <input type="number" class="form-control add" id="hra" placeholder="HRA"> 
 
    </div> 
 
</div>

のですか？

Answer 1

最も簡単な解決策はsum += parseInt(this.value) || 0;にあなたの合計行を変更することです。この方法でフィールドが空で、NaNのようなfalseyの値を返した場合、代わりに0が使用されます。

function sumOfIncome() { 
 
    var sum = 0; 
 
    $('.add').each(function() { 
 
    sum += parseInt(this.value) || 0; 
 
    console.log(sum) 
 
    }); 
 
    $('#netPay').val(sum); 
 
} 
 
$('.add').blur(function() { 
 
    sumOfIncome(); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="form-group row"> 
 
    <div class="col-md-3"> 
 
    <label for="DA" class="col-form-label">DA</label> 
 
    </div> 
 
    <div class="col-sm-2"> 
 
    <input type="number" class="form-control add" id="da" placeholder="DA"> 
 
    </div> 
 
</div> 
 

 
<div class="form-group row"> 
 
    <div class="col-md-3"> 
 
    <label for="HRA" class="col-form-label">HRA</label> 
 
    </div> 
 
    <div class="col-sm-2"> 
 
    <input type="number" class="form-control add" id="hra" placeholder="HRA"> 
 
    </div> 
 
</div>

Answer 2

使用この$.isNumeric()jsfiddle：

HTML：

<div class="form-group row"> 
    <div class="col-md-3"><label for="DA" class="col-form-label">DA</label></div> 
     <div class="col-sm-2"> <input type="number" class="form-control add" id="da" placeholder="DA"> 
     </div> 
    </div> 

<div class="form-group row"> 
    <div class="col-md-3"><label for="HRA" class="col-form-label">HRA</label></div> 
     <div class="col-sm-2"> <input type="number" class="form-control add" id="hra" placeholder="HRA"> 
     </div> 
</div> 
<div id="netPay"> 

</div> 

jqueryのは：

function sumOfIncome() { 
    var sum = 0; 
    $('.add').each(function(){ 
    var val = $(this).val(); 
    if($.isNumeric(val)) 
    { 
     sum += parseInt(val); 
     console.log(sum) 
    } 
    }); 
    $('#netPay').text(sum); 
    } 

    $('.add').blur(function(){ 
    sumOfIncome(); 
    });