How to format a number large number as a string using JavaScript

Question

I coded the following quick loan calculator using online tutorials and stuff as I have very basic coding skills. It works perfectly, the only thing that I need changed is that all three the output amounts needs spaces in the numbers... for example, it should output "400 000" instead of "400000". How can I add a space or a coma to make the large numbers more readable?

<form oninput="loanval.value=loan.value; periodval.value=period.value; paymentval.value=Math.floor(loan.value / period.value)">

<label>Loan Amount</label>
<input type="range" id="loan" name="loan" min="5000" max="400000" step="5000">              
<output name="loanval" for="loan">0</output>

<label>Loan Period</label>
<input type="range" id="period" name="period" min="1" max="15">          
<output name="periodval" for="period">0</output>

<label>Your monthly repayment will be:
<output name="paymentval">0</output>

</form>

Possible duplicate of [How to print a number with commas as thousands separators in JavaScript](http://stackoverflow.com/questions/2901102/how-to-print-a-number-with-commas-as-thousands-separators-in-javascript) — Cruiser, Mar 22 '16 at 12:48
[`Number.toLocaleString`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toLocaleString) — pawel, Mar 22 '16 at 12:50
Thanx guys, but I don't know how to apply that to my code... like where do I add it? Sorry but I have very basic skills, appreciate the help though. — Shtarley, Mar 22 '16 at 12:52

score 1 · Answer 1 · answered Mar 22 '16 at 13:00

1

Change

paymentval.value=Math.floor(loan.value / period.value)

to

paymentval.value=Math.floor(loan.value / period.value).toLocaleString()

You can add your locale if you want country specific formating. E.G.

paymentval.value=Math.floor(loan.value / period.value).toLocaleString('de-DE')

answered Mar 22 '16 at 13:00

Jacob van Lingen

8,989
7
48
78

Great, thanx for the simple solution... it works perfect. But only on the third output.... I assume on the first two outputs.... they need to be add differently. How would I add toLocaleString to oninput="loanval.value=loan.value;" – Shtarley Mar 22 '16 at 13:09
The first line is not an option, just a piece of your code :). Don't know why the second did not work, maybe it has something to to with your default locale. To anwser your second question: change your code to `oninput="loanval.value=loan.value.toLocaleString('de-DE');"`. In addition to all of this, I recommend a JS course like https://www.codecademy.com/learn/javascript to understand the basics of JS better! – Jacob van Lingen Mar 22 '16 at 13:20

Asad · Answer 2 · 2016-03-22T12:59:46.383

0

you can break the number by taking modulus like if number is 400000 , make its copy first then take modulus with 1000 i.e answer is 400 . and remainder is 0 so then you can put comma after 400 and then can append the both 400 and 1000 like 400,000. modulus means divide it with 1000

edited Mar 22 '16 at 12:59

answered Mar 22 '16 at 12:51

Asad

3,070
7
23
61

Cruiser · Answer 3 · 2016-03-22T13:05:56.157

I would change your output tag to a span and do this:

var num = $('#loan').val();
num = numberWithCommas(num);
$('#loanval').text(num);

//from http://stackoverflow.com/questions/2901102/how-to-print-a-number-with-commas-as-thousands-separators-in-javascript

function numberWithCommas(x) {
    return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}

and your html would be:

<label>Loan Amount</label>
<input type="range" id="loan" name="loan" min="5000" max="400000" step="5000">              
<span id ="loanval">0</span>

You can do this for all the outputs, too. Then to add them up you'd do something like:

//for each span...
var numberToAdd = $('#loanval').val();
numberToAdd = parseInt(numberToAdd);
$('#paymentval').text(numberToAdd);

<span id="paymentval">0</span>

How to format a number large number as a string using JavaScript

3 Answers3