Perform calculation after adding Commas to the number

Question

I have the following function which adds commas to the text field. Example: 5000000 is returned as 5,000,000.

function addComma(values) {
   values.value = values.value.replace(",", "").replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}

if (document.getElementById("values"))
    payment = parseInt(document.getElementById("values").value);

<label1>Rent</label1> <input id="values" type="text" onkeyup="addComma(this);">

However, I am not able to use it any further with other variables. If i remove parseInt, it returns NAN and adding parseInt returns 5.

payment = 10;
values = 5,000,000

The following returns PV = payment * NAN5,000,000 while debugging.

PV = payment*values;

What am i doing wrong here? Any help is appreciated. Thank you!

FYI: There is no such element as ``. There is ``, but it requires that you either nest the form field that it is a label for within it or that you give the element a `for` attribute that has a value that is the `id` of the element that it is a label for. — Scott Marcus, Nov 08 '18 at 21:08
https://stackoverflow.com/questions/2901102/how-to-print-a-number-with-commas-as-thousands-separators-in-javascript — Scott Marcus, Nov 08 '18 at 21:09
If I'm not mistaken about what you're asking, once you add the commas, it is no longer a number. It's a string. So any attempt to add, subtract, multiply, etc with another number will either result in NaN. — yaakov, Nov 08 '18 at 21:19
The best way to do something like this would be to do all the operations you are going to do on the number, and then format it with the commas. — yaakov, Nov 08 '18 at 21:19
Your input decorating function doesn't handle backspace very well. Unless it's 100% flawless I think it's going to be a lot more trouble than it's worth. — James, Nov 08 '18 at 22:01
@ScottMarcus The questions are different. My question was not how but why i am not able to perform further calculations after the 'how'. — ace23, Nov 12 '18 at 14:32
@YaakovAinspan Yes. I posted the answer. Changing it back to the number for further calculation worked for me. — ace23, Nov 12 '18 at 14:33

AppleCiderGuy · Accepted Answer · 2018-11-08T21:06:51.600

1

you can get rid of commas by using the below command:

values = values.replace(/\,/g,'')

this essencially removed all the commas from your string now, convert the string validly representing a number to a number indeed using:

values = Number(values)

Hope it helps !!!

edited Nov 08 '18 at 21:06

answered Nov 08 '18 at 21:03

AppleCiderGuy

1,249
1
9
16

What does this do? Why does it fix the issue? Please try to add a bit more detail; it's rare that *"Just do this"* is considered a "complete" and/or "good" answer. – Tyler Roper Nov 08 '18 at 21:04

lucascaro · Answer 2 · 2018-11-08T21:14:54.073

1

You are trying to use parseInt on a string that has commas added. parseInt will stop parsing after the first non-numeric character:

If parseInt encounters a character that is not a numeral in the specified radix, it ignores it and all succeeding characters and returns the integer value parsed up to that point. parseInt truncates numbers to integer values. Leading and trailing spaces are allowed.

console.log(parseInt('123456')); // 123456
console.log(parseInt('123,456')); // 123

Given this, you should remove the commas before parsing:

function addComma(values) {
  values.value = values.value.replace(",", "").replace(/\B(?=(\d{3})+(?!\d))/g, ",");
  
  // Moved the rest of the conde into the function so you can
  // see the output as you type.
  // Get your element by Id into a const so you don't need to query twice.
  const element = document.getElementById("values");
  if (element) {
    // Remove commas from the number to be parsed
    const value = element.value.replace(",", "");
    // It is best practice to include the radix when calling parseInt
    const payment = parseInt(value, 10);
    console.log(payment);
  }
}

<label>Rent</label> <input id="values" type="text" onkeyup="addComma(this);">

edited Nov 08 '18 at 21:14

answered Nov 08 '18 at 21:03

lucascaro

16,550
4
37
47

Translating a string of comma seperated numbers is well within `parseInt`s usecase – SpeedOfRound Nov 08 '18 at 21:05
2

nope, `parseInt` will stop parsing after finding the first comma, I'll add that to the answer, – lucascaro Nov 08 '18 at 21:09
2

@SpeedOfRound `parseInt()` stops parsing at the first non-numeric character. From [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/parseInt): *If parseInt encounters a character that is not a numeral in the specified radix, it ignores it and all succeeding characters and returns the integer value parsed up to that point.* – Scott Marcus Nov 08 '18 at 21:10
2

Be aware that, while not a requirement, it is a best-practice to include the optional second argument to `parseInt()`, which is the radix. This protects against base operations other than the intended base being accidentally performed. – Scott Marcus Nov 08 '18 at 21:12

score 0 · Answer 3 · answered Nov 12 '18 at 14:30

0

Doing the following worked for me.

payment = document.getElementById("values").value;
var Return = payment.replace(/\,/g,'');

Instead of parseInt i just declared another variable and removes commas to perform any further calculations.

answered Nov 12 '18 at 14:30

ace23

142
1
16

Perform calculation after adding Commas to the number

3 Answers3