How do I make my HTML5 Output use Commas?

Question

I am currently building a basic webpage for work and want to include a price calculator. The issue is the currency is in Ugandan Shillings so the output is in the hundreds of thousands and millions and will display as a block number (example: 98635816). How to insert commas to make the output number easier to read?

PS Here is the HTML for the calculator

<form  oninput="y.value=(19657.86*parseInt(b.value)).toFixed(0);
 x.value=(928.29*parseInt(b.value)).toFixed(0);
 z.value=((y.value)-(x.value)).toFixed(0)">
    <input type="number" id="b" value="0">
    <output name="y" for="a b"></output>
    <output name="x" for="a b"></output>
    <output name="z" for="a b"></output>

Answer 1

You can use below specific code:

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

Or javascript's Number.prototype.toLocaleString . ( slower than regex )

var n = 163546872.345
console.log(n.toLocaleString()) // "163,546,872.345"

(!) For people who use node.js or want something different in the browser Numeral.js might be interesting.

Answer 2

you can try this:

<form  oninput="y.value=numberWithCommas((19657.86*parseInt(b.value)).toFixed(0));
 x.value=numberWithCommas((928.29*parseInt(b.value)).toFixed(0));
 z.value=numberWithCommas(((19657.86*parseInt(b.value))-(928.29*parseInt(b.value))).toFixed(0))">
    <input type="number" id="b" value="0">
    <output name="y" for="a b"></output>
    <output name="x" for="a b"></output>
    <output name="z" for="a b"></output>

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

    </script>