Adding decimals together in JavaScript

Question

I have the following function which totals up three field values:

function calculatePublicTransportTotalClaim(){

    var Bus_Weekly_Claim = formatNum( $('#Bus_Weekly_Claim').val() );
    var Train_Weekly_Claim = formatNum( $('#Train_Weekly_Claim').val() );
    var Tram_Weekly_Claim = formatNum( $('#Tram_Weekly_Claim').val() );

    var Total = Bus_Weekly_Claim + Train_Weekly_Claim + Tram_Weekly_Claim;

    console.log( Total )

    $('#PublicTransport_Weekly_Claim').val( Total );

}

The inputs have a default value of 0.00

And they have their values converted to ints using formatNum which looks like:

function formatNum(n) {

    var round = Math.round;

    n = round(n);

    return n.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1,");
}

However when I call the function calculatePublicTransportTotalClaim, the returned Total is: 0.000.000.00

What have I done wrong? As the values should now be numbers, but instead they seem to be acting like strings when I'm adding them together.

adeneo · Accepted Answer · 2014-04-08 14:42:59Z

4

toFixed returns a string, and adding strings together does that.

As you're ~~replacing the period with a~~ adding commas, you'd have to do that after the numbers are added up, so the formatNum function isn't really usable, just do this instead

function calculatePublicTransportTotalClaim(){

    var Bus_Weekly_Claim   = Math.round( $('#Bus_Weekly_Claim').val() );
    var Train_Weekly_Claim = Math.round( $('#Train_Weekly_Claim').val() );
    var Tram_Weekly_Claim  = Math.round( $('#Tram_Weekly_Claim').val() );

    var Total = Bus_Weekly_Claim + Train_Weekly_Claim + Tram_Weekly_Claim;

    var parsedTotal = Total.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1,");

    $('#PublicTransport_Weekly_Claim').val( parsedTotal );

}

edited Apr 8, 2014 at 14:42

answered Apr 8, 2014 at 14:37

adeneo

319k29 gold badges410 silver badges392 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Mike Samuel Over a year ago

The regex replace doesn't replace the period with a comma. It inserts commas around every myriad of 3 digits.

adeneo Over a year ago

@MikeSamuel - Yes it does, didn't really read it I suppose, but same same, should be done after the numbers are added up.

jacqijvv Over a year ago

No one is mentioning parseFloat(), am I being dumb?

adeneo Over a year ago

@jacqijvv - isn't very usable either, parseFloat( '123,665,443.33' ) == 123

adeneo Over a year ago

@MikeSamuel - I meant, yes it does what you say it does, not yes it does, as I don't agree with you, a bit ambiguous there ?

|

kei · Accepted Answer · 2014-04-08 14:39:05Z

1

toFixed() returns a string

You are concatenating instead of adding.

Force it to return a number by adding +,
e.g. return +(n.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1,"));

answered Apr 8, 2014 at 14:39

kei

20.5k2 gold badges38 silver badges64 bronze badges

Comments

Mike Samuel · Accepted Answer · 2014-04-08 15:57:57Z

1

Format the numbers after you added them together. Use parseFloat() to ensure they are being interpreted as decimal number values.

total = parseFloat(val1) + parseFloat(val2) + parseFloat(val3)

Then format the total, parseFloat() is JavaScript's equivalent to parseInt() but for decimal values

Note: you must not have commas, in the number when using parseFloat. Always add formatting only after adding values.

edited Apr 8, 2014 at 15:57

Mike Samuel

121k30 gold badges230 silver badges255 bronze badges

answered Apr 8, 2014 at 14:51

Baine Sumpin

1425 bronze badges

Collectives™ on Stack Overflow

Adding decimals together in JavaScript

3 Answers 3

7 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related