Always display total and stop from displaying NaN

Question

Why is it showing NaN unless I put the value as zero here? I'd like it to keep a running total and just display the placeholder but unless I put the value of the inputs to 0 then it shows up as NaN in the total div where the total displays?

$("body").on("blur", "#serviceContract,#gapInsurance,#extendedWarranty,#amtOwedOnTrade,#tradeInValue,#manufacturerRebate,#downPayment,#estimatedTaxesAndFees,#vehiclePrice",function() {
    updateTotal();
});
var updateTotal = function() {
    var input1 = parseInt($('#vehiclePrice').val());
    var input2 = parseInt($('#estimatedTaxesAndFees').val());
    var input3 = parseInt($('#downPayment').val());
    var input4 = parseInt($('#manufacturerRebate').val());
    var input5 = parseInt($('#tradeInValue').val());
    var input6 = parseInt($('#amtOwedOnTrade').val());
    var input7 = parseInt($('#extendedWarranty').val());
    var input8 = parseInt($('#gapInsurance').val());
    var input9 = parseInt($('#serviceContract').val());
   if (input1 ==undefined || input2 == undefined || input3 == undefined || input4 == undefined || input5 == undefined || input6 == undefined || input7 == undefined || input8 == undefined ||input9 == undefined ) {
        $('#total').text(total);
    } else {
        var max = 40000;
        var total = input1 + input2 - input3 - input4 - input5 + input6 + input7 + input8 + input9;

        if (total > max) {
            $('#total').text('The maximum is ' + max);
            $('#total1').val(40000);
        } else {
            $('#total').text(total);
            $('#total1').val(total);
        }
    }
};

das fiddle

score 3 · Accepted Answer · edited Jun 20 '20 at 09:12

3

Because when the field is empty, it does parseInt of nothing, return NaN.

You can prevent that by doing this on each line :

var input1 = parseInt($('#vehiclePrice').val()) || 0;

If the val is "falsy" it will calculate as 0.

As CodeMoose said :

"always define base-10 when using parseInt: parseInt($('#vehiclePrice').val(), 10)."

That parameter is the radix

radix

An integer that represents the radix of the above mentioned string. Always specify this parameter to eliminate reader confusion and to guarantee predictable behavior. Different implementations produce different results when a radix is not specified.

Taken from MDN

edited Jun 20 '20 at 09:12

Community

1
1

answered Jan 21 '14 at 18:20

Karl-André Gagnon

33,662
5
50
75

4

always define base-10 when using parseInt: `parseInt($('#vehiclePrice').val(), 10)` – CodeMoose Jan 21 '14 at 18:22
@CodeMoose why so? does it not default to base 10? – andrew Jan 21 '14 at 18:25
That is what I was wondering. I actually went and looked it up. I'm going to restrict the keys that can be entered to numbers only and use some jq.validate. But what happens if you do not define the base-10? – isaac weathers Jan 21 '14 at 18:27
Karl-André Gagnon - You're answer worked BTW. Thank you. Will accept in 3 minutes – isaac weathers Jan 21 '14 at 18:27
It will interpret strings differently and in unexpected ways, often reverting to base-8. See http://stackoverflow.com/questions/6900857/alertparseint09-shows-me-0-why – CodeMoose Jan 21 '14 at 18:28
You might be able to get away without it, but it's generally good practice and saves a lot of surprise headaches. – CodeMoose Jan 21 '14 at 18:29

Always display total and stop from displaying NaN

1 Answers1

radix