With JavaScript single function we can format number like we want for example in example this formatNumber function add comma and dot according to number pass in function see the demo for more info.
script.js
function formatNumber(num){
var num,dec, numSplit;
/*
What we want
20000.0000 = 20,000.00
2000 = 2,000.00
*/
/*Return the absolute value of a number:
Math.abs(-7.25);
Result 7.25
*/
num = Math.abs(num);
/*Convert a number into a string, keeping only two decimals:
var num = 5.56789;
var n = num.toFixed(2);
Result 5.57
*/
num = num.toFixed(2);
numSplit = num.split('.');
int = numSplit[0];
if(int.length > 3){
/*string.substr(start, length)*/
int = int.substr(0,int.length -3) + ',' + int.substr(int.length -3,3);
}
dec = numSplit[1];
return int + '.' + dec;
};
var x = document.getElementsByClassName('result');
for(var i = 0; i < x.length; i++){
x[i].innerHTML = formatNumber(x[i].innerHTML);
}
index.html
<div class="container">
<h3>Change number format</h3>
<div class="row">
<div class="col-6">Actual</div>
<div class="col-6">Result</div>
</div>
<div class="row">
<div class="col-6">2</div>
<div class="col-6 result">2</div>
</div>
<div class="row">
<div class="col-6">20</div>
<div class="col-6 result">20</div>
</div>
<div class="row">
<div class="col-6">200</div>
<div class="col-6 result">200</div>
</div>
<div class="row">
<div class="col-6">2000</div>
<div class="col-6 result">2000</div>
</div>
<div class="row">
<div class="col-6">20000</div>
<div class="col-6 result">20000</div>
</div>
<div class="row">
<div class="col-6">200000</div>
<div class="col-6 result">200000</div>
</div>
<div class="row">
<div class="col-6">2000000</div>
<div class="col-6 result">2000000</div>
</div>
<div class="row">
<div class="col-6">20000000</div>
<div class="col-6 result">20000000</div>
</div>
<div class="row">
<div class="col-6">200000000</div>
<div class="col-6 result">200000000</div>
</div>
<div class="row">
<div class="col-6">2000000000</div>
<div class="col-6 result">2000000000</div>
</div>
<div class="row">
<div class="col-6">20000000000</div>
<div class="col-6 result">20000000000</div>
</div>
<div class="row">
<div class="col-6">200000000000</div>
<div class="col-6 result">200000000000</div>
</div>
<div class="row">
<div class="col-6">2000000000000</div>
<div class="col-6 result">2000000000000</div>
</div>
<div class="row">
<div class="col-6">20000000000000</div>
<div class="col-6 result">20000000000000</div>
</div>
</div>
Just wish to say your article is as amazing. The clearness in your post is simply nice and i could assume you are an expert on this subject.
Well with your permission allow me to grab your RSS feed to keep updated with
forthcoming post. Thanks a million and please carry on the gratifying work.
I don’t know whether it’s just me or if perhaps everyone elseexperiencing issues with your website. It appears as though some ofthe written text on your posts are running off the screen. Can somebody else please provide feedback and let me know if thisis happening to them as well? This may be a issue with my web browserbecause I’ve had this happen before. Kudos
Thanks for sharing your thoughts on HTML. Regards
Howdy this is somewhat of off topic but I was wanting to know if blogsuse WYSIWYG editors or if you have to manually code with HTML.I’m starting a blog soon but have no coding knowledge so Iwanted to get advice from someone with experience. Any help would be greatly appreciated!
Stunning quest there. What occurred after?
Thanks!
Nice response in return of this matter with genuine arguments and describing everything regarding that.