Why are my number .val()'s getting turned into strings?

Question

I'm trying to build myself a financial calculator and everything seems to be working (there are no errors in the console) except for the fact that it's pulling all the .val() data and converting to strings. I thought .val() pulls the value as the primitive that is represented in the input? How do I convert the data to integers? (Oh, and don't worry about the date I'm still working on that.

var financeCalc = function(e) {
    e.preventDefault();

//find date 
    var dateData = new Date();
    var month = dateData.getMonth()+1;
    var year = dateData.getFullYear();
    var date = year + "-" + month;
    var endDate = $('.endDate').val();
    var monthsLeft = endDate - date;

//monthly expenses
    var rent = $('.rent').val();
    var cable = $('.cable').val();
    var gas = $('.gas').val();
    var costcoBill = $('.costco').val();
    var kingSupersBill = $('.supers').val();

//CREDIT CARDS
    //wells fargo
    var wfCredit = 6000.00;
    var wfSpent = $('.wfSpent').val();

    //citi
    var citiCredit = 1000.00;
    var citiSpent = $('.citiSpent').val();

    //american express
    var amexCredit = 2000.00;
    var amexSpent = $('.amexSpent').val();

    //trek
    var trekCredit = 4000.00;
    var trekSpent = $('.trekSpent').val();

    //capital one buypower
    var buyPowerCredit = 2500.00;
    var buyPowerSpent = $('.buyPowerSpent').val();

    //chase freedom
    var chaseFreedomCredit = 2000.00;
    var chaseFreedomSpent = $('.chaseFreedomSpent').val();

    //discover
    var discoverCredit = 2500.00;
    var discoverSpent = $('.discoverSpent').val();

    //amazon
    var amazonCredit = 2500.00;
    var amazonSpent = $('.amazonSpent').val();

    //tuition
    var springTuition = $('.springTuition').val();
    var summerTuition = $('.summerTuition').val();

    //other expenses
    var otherExpenses = $('.otherExpenses').val();
    var emergencyExpenses = $('.emergencyExpenses').val();

//MONEY BROUGHT IN
    var madePay = $('.madePay').val();
    var otherIncome = $('.otherIncome').val();



//money available
    var savingsTotal = $('.wfTotal').val();
    var wfAvail = wfCredit - wfSpent;
    var buyPowerAvail = buyPowerCredit - buyPowerSpent;
    var citiAvail = citiCredit - citiSpent;
    var chaseFreedomAvail = chaseFreedomCredit - chaseFreedomSpent;
    var discoverAvail = discoverCredit - discoverSpent;
    var amazonAvail = amazonCredit - amazonSpent;




//CALCULATOR
    //credit owed
    var creditDue = wfSpent + citiSpent + trekSpent + buyPowerSpent + chaseFreedomSpent + discoverSpent + amazonSpent;
    console.log("Credit Due: " + creditDue);

    //total available
    var totalAvail = savingsTotal + wfAvail + buyPowerAvail + citiAvail + chaseFreedomAvail + discoverAvail + amazonAvail;
    console.log("Total Available: " + totalAvail);  

    //total due
    //var totalDue = (rent*monthsLeft) + (cable*monthsLeft) + (gas*monthsLeft) + (costcoBill*monthsLeft) + (kingSupersBill*monthsLeft) + springTuition + summerTuition + otherExpenses + emergencyExpenses;
    var totalDue = rent + cable + gas + costcoBill + kingSupersBill + springTuition + summerTuition + otherExpenses + emergencyExpenses;
    console.log("Total Due: " + totalDue);

    //total
    var total = totalAvail - totalDue;
    console.log("Total: " + totalDue);

    $('.totals__creditDue').html("Credit Due: " + creditDue);
    $('.totals__totalAvail').html("Total Available: " + totalAvail);
    $('.totals__totalDue').html("Total Due: " + totalDue);
    $('.totals__total').html("Total: " + total);

};

$(function(){
    $('.calculate').on('click', financeCalc);
});

This shoud help: http://stackoverflow.com/questions/7784784/preventing-concatenation — Telmo Marques, Dec 21 '14 at 23:22

score 3 · Accepted Answer · edited May 23 '17 at 11:56

...it's pulling all the .val() data and converting to strings. I thought .val() pulls the value as the primitive that is represented in the input? How do I convert the data to integers?

Textbox values are always text. If you want them to be numeric, you need to parse them with either parseInt or parseFloat.

jQuery.val() is in fact pulling the "primitive" that is represented in the input, however the input is always text, so you get a string.

var rent = parseInt($('.rent').val());

or

var rent = parseFloat($('.rent').val());

...will convert the string to javascript number.

Since you are dealing with currency values, you might be tempted to use parseFloat. However you might run into some weird values when you do math operations with parseFloated numbers. Might want to take a look at this to help you with rounding to 2 decimal places:

https://stackoverflow.com/a/1726662/304832

Also, beware of using `parseInt` without the radix argument. If you were to pass `0x10` accidentally, it would return `16`, since it sees the `0x` and assumes a hexadecimal number. It's almost always better to use `parseInt(x, 10)` so you get consistent results. — Heretic Monkey, Dec 21 '14 at 23:37

Why are my number .val()'s getting turned into strings?

1 Answers1