Question

I am experiencing something odd, please see below. Why is alert 1 outputting 0 but alert 2 outputting the correct sum? They are set to the same thing…

var sumTotal = parseFloat($('#tb1').val()) + parseFloat($('#tb2').val());
//tb1.val() == 3, tb2.val() == 5;    

1) alert(sumTotal); //Outputs 0;
2) alert(parseFloat($('#tb1').val()) + parseFloat($('#tb2').val())); //Outputs 8;

Exact code:

    $(document).ready(function () {
        var koh = 1;
        var sumTotal = parseFloat($('#tb1').val()) + parseFloat($('#tb2').val());
        window.setInterval(function () {
            // correct value
            tb3.val(parseFloat($('#tb1').val()) + parseFloat($('#tb2').val())); 
            tb3.val(parseFloat(sumTotal)); // 0
            tb3.val(sumTotal); // 0
            tb3.val(koh++) //increments +1
        }, 2500);
    })

since koh increments +1 can this still be a scoping issue?

Answer 1

sumTotal is calculated before the values of the text boxes have changed. If they default to 0, the result will be 0, and it won’t change even if the text boxes’ values do.

If they default to blank, sumTotal is NaN — and it still won’t change.