Undesired effects when calculating 2 amounts with jQuery

Question

I am not getting the desired output with this code. Everything seems to be working except if for example you enter anything between 100 - 199. It gives a negative number in the other box, when I would like it to just split the balance into both boxes. You can see a working example here: http://jsfiddle.net/bFJq2/ ( enter in 100 to see what I mean )

Not sure if there is something I am doing wrong, I feel like it is treating the number as a decimal or something. Any help is greatly appreciated.

Here is the JS:

// make sure both inputs are equal to balance
$('input[id*="amount"]').on("blur", function() {
    var balance     = $('#balance').val()
       ,thisAmount  = $(this)
       ,otherAmount = $('input[id*="amount"]').not(this);

    // check if value is less than balance
    if(thisAmount.val() < balance && thisAmount.val() + otherAmount.val() <= balance){
        // if so populate other input with remaining amount
        otherAmount.val(balance - thisAmount.val());
    }

    // check to make sure amount is not greater than balance
    if((thisAmount.val() + otherAmount.val()) > balance){
        $('input[id*="amount"]').not(this).val(function(){
            // if value is greater than balance, just split balance into both amounts
            if(thisAmount.val() > balance){
                thisAmount.val(balance/2);
                return balance/2;
            }
        });
    }
});

Answer 1

Your values are being interpreted as strings, not numbers. See what happens when you debug:

So the comparisons are string comparisons ("alphabetically", "100" is before "20"). It's also doing string concatenation when you use the + operator.

You need to convert the values to numbers before you use them, using Number(), parseFloat(), or parseInt(), depending.

Answer 2

I was doing this when Jason P answered. you really use string instead of number. I used parseInt() to correct.

Edited working fiddle

// make sure both inputs are equal to balance
$('input[id*="amount"]').on("blur", function() {
    var balance     = parseInt($('#balance').val());
    var thisAmount  = $(this);
    var otherAmount = $('input[id*="amount"]').not(this);

    // check if value is less than balance
    if(parseInt(thisAmount.val()) < balance && parseInt(thisAmount.val()) + parseInt(otherAmount.val()) <= balance){
        // if so populate other input with remaining amount
        otherAmount.val(balance - thisAmount.val());
    }

    // check to make sure amount is not greater than balance
    if((parseInt(thisAmount.val()) + parseInt(otherAmount.val())) > balance){
        $('input[id*="amount"]').not(this).val(function(){
            // if value is greater than balance, just split balance into both amounts
            if(parseInt(thisAmount.val()) > balance){
                thisAmount.val(balance/2);
                return balance/2;
            }
        });
    }
});