• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

The Programming Expert

Solving All of Your Programming Headaches

  • HTML
  • JavaScript
  • jQuery
  • PHP
  • Python
  • SAS
  • Ruby
  • About
You are here: Home / JavaScript / Add Commas to Number in JavaScript

Add Commas to Number in JavaScript

July 18, 2022 Leave a Comment

We can add commas to a number in JavaScript by using the JavaScript toLocaleString() method.

var num = 1234;
var commaNum = num.toLocaleString();

When working with numbers in JavaScript, many times you need to format those numbers a certain way. One such situation is if you want to add commas to numbers in your program or application.

In JavaScript, we can easily add commas to a number by using the toLocaleString() method.

Here is our code again with some examples.

var num1 = 1234;
var num2 = 2434532.106;
var num3 = -238445;
var num4 = 203200932020;

var commaNum1 = num1.toLocaleString();
var commaNum2 = num2.toLocaleString();
var commaNum3 = num3.toLocaleString();
var commaNum4 = num4.toLocaleString();

console.log(commaNum1);
console.log(commaNum2);
console.log(commaNum3);
console.log(commaNum4);

#Output
1,234
2,434,532.106
-238,445
203,200,932,020

Add Commas to Number in JavaScript with a Click

In this simple example, we will let the user input a number, and we will add commas to it, if necessary.

Here is the HTML setup:

<div id="div1">
  <label for="num1">Enter a Number:</label>
  <input type="text" id="num1" name="num1">
  <div id="click-me" onclick="addCommas()">Add Commas to Number</div>
  <div id="results"></div>
</div>

We will add an onclick event to our #click-me div that will run a function we will create. Our function will first use the value property along with the getElementById method to get the number the user has entered.

We will then add commas to the number using the JavaScript toLocaleString() method.

We will finally post the results using the textContent property.

function addCommas(){
  
  //Get the user number
  var userNum = Number(document.getElementById("num1").value);
  
  //Add commas to number
  var commaNumber = userNum.toLocaleString();

  //Display the results
  document.getElementById("results").textContent = commaNumber;

}

The final code and output for adding commas to a number in JavaScript is below.

Code Output:


Add Commas to Number

Full Code:

<div id="div1">
  <label for="num1">Enter a Number:</label>
  <input type="text" id="num1" name="num1">
  <div id="click-me" onclick="addCommas()">Add Commas to Number</div>
  <div id="results"></div>
</div>

<script>

function addCommas(){
  var userNum = Number(document.getElementById("num1").value);
  var commaNumber = userNum.toLocaleString();
  document.getElementById("results").textContent = commaNumber;
};

</script>

Hopefully this article has been useful for you to learn how to add commas to a number in JavaScript.

Other Articles You'll Also Like:

  • 1.  Reverse a String in JavaScript
  • 2.  Reverse For Loop JavaScript
  • 3.  Using JavaScript to Create an Empty Array
  • 4.  JavaScript Exponent – Exponentiate Numbers with Math.pow()
  • 5.  Using the appendChild Method with JavaScript to Add Items to a List
  • 6.  JavaScript cosh – Find Hyperbolic Cosine of Number Using Math.cosh()
  • 7.  charAt() JavaScript – Getting the Index Position of a Character
  • 8.  Using JavaScript to Scroll to the Top of the Page
  • 9.  JavaScript Change Background Color of Element
  • 10.  Using JavaScript to Get the URL Path

About The Programming Expert

The Programming Expert is a compilation of a programmer’s findings in the world of software development, website creation, and automation of processes.

Programming allows us to create amazing applications which make our work more efficient, repeatable and accurate.

At the end of the day, we want to be able to just push a button and let the code do it’s magic.

You can read more about us on our about page.

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Primary Sidebar

About The Programming Expert

the programming expert main image

Welcome to The Programming Expert. We are a group of US-based programming professionals who have helped companies build, maintain, and improve everything from simple websites to large-scale projects.

We built The Programming Expert to help you solve your programming problems with useful coding methods and functions in various programming languages.

Search

Learn Coding from Experts on Udemy

Looking to boost your skills and learn how to become a programming expert?

Check out the links below to view Udemy courses for learning to program in the following languages:

Copyright © 2023 · The Programming Expert · About · Privacy Policy