使用运行总计时，Javascript $ NaN

Question

I have this Javascript function that calculates up to 30 different fields as the user can add up to 30 items they sold and input the amount and have the price show up. This code works for each line item, I can add up to 30 items and see their individual totals just fine. At the bottom of the form I have a subtotal area and that's where I can't shake this $NaN showing up... when viewing the code its the subtotal, stantot, and showtot variables I'm getting NaN for...

$(document).ready(function() {
    var subtotal = 0;
    var stantot = 0;
    var showtot = 0;
    $("input").keyup(function() {
        for (i = 0; i <= 30; i++) {
            var unitp = $("#unitp" + i).val();
            var casep = $("#casep" + i).val();
            var units = $("#units" + i).val();
            var cases = $("#cases" + i).val();
            var st_disc = $("#st_disc").val();
            var sh_disc = $("#sh_disc").val();

            var unitr = (unitp * units);
            var caser = (casep * cases);
            var result = (unitr + caser);
            var st_disc_fix = (st_disc / 100);
            var sh_disc_fix = (sh_disc / 100);
            var st_disc_solo = (st_disc_fix * result);
            var sh_disc_solo = (sh_disc_fix * result);
            var disc_total = (st_disc_fix + sh_disc_fix);
            var disc_whole = (disc_total * result);

            var disc = (result - disc_whole);
            var st_disc_tot = (result - disc_whole);
            var sh_disc_tot = (result - disc_whole);

            $("#line" + i).val('$' + result.toFixed(2));
            $("#disc" + i).val('$' + disc.toFixed(2));
            subtotal += parseInt(result);
            stantot += parseInt(st_disc_tot);
            showtot += parseInt(sh_disc_tot);
        }
        $("#totretail").val('$' + subtotal.toFixed(2));
        $("#standiscount").val('$' + stantot.toFixed(2));
        $("#showdiscount").val('$' + showtot.toFixed(2));

        var totship = ($("#totship").val() * 1);
        var tottax = ($("#tottax").val() * 1);

        var finaltotal = (subtotal + stantot + showtot + totship + tottax);
        $("#total").val('$' + finaltotal.toFixed(2));

    });
});

Answer 1

Here's what I would do.

First, I would create a function that takes a string and guarantees that a number is returned:

function toNumber(val) {
    var num = parseFloat(val);
    num = isNaN(num) ? 0 : num;
    return num;
}

In this case, any NaN values are converted to zero. You can alter this to suit the needs of your application.

Then, I would update your variable declarations where you're pulling in the field values like so:

var unitp = toNumber($("#unitp" + i).val());
var casep = toNumber($("#casep" + i).val());
var units = toNumber($("#units" + i).val());
var cases = toNumber($("#cases" + i).val());
var st_disc = toNumber($("#st_disc").val());
var sh_disc = toNumber($("#sh_disc").val());

Since all proceeding calculations are based on these variables, if you guarantee that none of these are NaN , then none of the following values will be NaN either (barring exceptional circumstances).

Answer 2

Saint Gerbil's answer worked beautifully, here is my working code for any future reference...

$(document).ready(function() {
var subtotal = 0;
var stantot = 0;
var showtot = 0;
$("input").keyup(function() {
    for (var i = 0; i <= 30; i++) {
        var unitp = parseFloat($("#unitp" + i).val()) || 0;
        var casep = parseFloat($("#casep" + i).val()) || 0;
        var units = parseFloat($("#units" + i).val()) || 0;
        var cases = parseFloat($("#cases" + i).val()) || 0;
        var st_disc = parseFloat($("#st_disc").val()) || 0;
        var sh_disc = parseFloat($("#sh_disc").val()) || 0;

        var unitr = (unitp * units);
        var caser = (casep * cases);
        var result = (unitr + caser);
        var st_disc_fix = (st_disc / 100);
        var sh_disc_fix = (sh_disc / 100);
        var st_disc_solo = (st_disc_fix * result);
        var sh_disc_solo = (sh_disc_fix * result);
        var disc_total = (st_disc_fix + sh_disc_fix);
        var disc_whole = (disc_total * result);

        var disc = (result - disc_whole);
        var st_disc_tot = (result - disc_whole);
        var sh_disc_tot = (result - disc_whole);

        $("#line" + i).val(result.toFixed(2));
        $("#disc" + i).val(disc.toFixed(2));
        subtotal += parseFloat((unitp * units) + (casep * cases));
        stantot += parseFloat(st_disc_tot);
        showtot += parseFloat(sh_disc_tot);
    }
    $("#totretail").val(subtotal.toFixed(2));
    $("#standiscount").val(stantot.toFixed(2));
    $("#showdiscount").val(showtot.toFixed(2));

    var totship = ($("#totship").val() * 1);
    var tottax = ($("#tottax").val() * 1);

    var finaltotal = (subtotal + stantot + showtot + totship + tottax);
    $("#total").val(finaltotal.toFixed(2));

    });
}); 

Answer 3

change

for (i = 0; i <= 30; i++) {

to

for (var i = 0; i <= 30; i++) {

Answer 4

you should check for empty and null strings so change all the statements like this

var unitp = $("#unitp" + i).val();

to

var unitp = $("#unitp" + i).val()===''?0:$("#unitp" + i).val();

OR

var unitp = $("#unitp" + i).val()||0;

Answer 5

Pass all of your user input to parseFloat or parseInt (depending if you need decimal points)

$(document).ready(function() {
    var subtotal = 0;
    var stantot = 0;
    var showtot = 0;
    $("input").keyup(function() {
        for (var i = 0; i <= 30; i++) {
            var unitp = parseFloat($("#unitp" + i).val()) || 0;
            var casep = parseFloat($("#casep" + i).val()) || 0;
            var units = parseInt($("#units" + i).val(),10) || 0;
            var cases = parseInt($("#cases" + i).val(),10) || 0;
            var st_disc = parseFloat($("#st_disc").val()) || 0;
            var sh_disc = parseFloat($("#sh_disc").val()) || 0;

            var unitr = (unitp * units);
            var caser = (casep * cases);
            var result = (unitr + caser);
            var st_disc_fix = (st_disc / 100);
            var sh_disc_fix = (sh_disc / 100);
            var st_disc_solo = (st_disc_fix * result);
            var sh_disc_solo = (sh_disc_fix * result);
            var disc_total = (st_disc_fix + sh_disc_fix);
            var disc_whole = (disc_total * result);

            var disc = (result - disc_whole);
            var st_disc_tot = (result - disc_whole);
            var sh_disc_tot = (result - disc_whole);

            $("#line" + i).val('$' + result.toFixed(2));
            $("#disc" + i).val('$' + disc.toFixed(2));
            subtotal += parseInt(result);
            stantot += parseInt(st_disc_tot);
            showtot += parseInt(sh_disc_tot);
        }
        $("#totretail").val('$' + subtotal.toFixed(2));
        $("#standiscount").val('$' + stantot.toFixed(2));
        $("#showdiscount").val('$' + showtot.toFixed(2));

        var totship = ($("#totship").val() * 1);
        var tottax = ($("#tottax").val() * 1);

        var finaltotal = (subtotal + stantot + showtot + totship + tottax);
        $("#total").val('$' + finaltotal.toFixed(2));

    });
});

This will default NaN entries to 0 and should carry on as you expect.

not sure what values you are expecting ints or floats so swap as needed.

EDIT: Added a couple of parseInt's so you know how to call them.