How to take an input value, display it in a currency style (1,000,000) but convert it back to a interger for calculations?

Question

I'm making a basic tax calculation app using Javascript. I want to put a number into an input, then have it display in the input with commas e.g input 100000 display 100,000. I need to then use this value for the calculations, so it has to be converted back to an integer.

I have the first part to convert, but I'm not sure the best way to convert back to actually use in the calculations.

let updateNumber = function (inputValue) {
  let newValue = Intl.NumberFormat().format(this.value);

  income.value = newValue;
};

income.addEventListener("change", updateNumber);

Hopefully, that makes sense. This is my first post.

Does this answer your question? [How can I parse a string with a comma thousand separator to a number?](https://stackoverflow.com/questions/11665884/how-can-i-parse-a-string-with-a-comma-thousand-separator-to-a-number) — Heretic Monkey, Jul 29 '20 at 21:02
Does this answer your question? [Is there a way to reverse the formatting by Intl.NumberFormat in JavaScript](https://stackoverflow.com/questions/29255843/is-there-a-way-to-reverse-the-formatting-by-intl-numberformat-in-javascript) — James, Jul 29 '20 at 21:06
This is an interesting question but still why not just remember the old value instead of trying to reverse engineer the new one? — GirkovArpa, Jul 29 '20 at 21:21

score 0 · Answer 1 · answered Jul 29 '20 at 21:23

You can use the unary plus operator to convert the input's value to a number before replacing it.

Example:

let updateNumber = function (inputValue) {
  let newValue = Intl.NumberFormat().format(this.value);
  let num = +this.value;
  income.value = newValue;
  console.log(num * 2);
};

document.querySelector('#income').addEventListener("change", updateNumber);

<input id="income">

How to take an input value, display it in a currency style (1,000,000) but convert it back to a interger for calculations?

1 Answers1