Home : Internet : JavaScript : Rounding

How to Round Numbers

This page shows you how to round a number to a specified number of decimal places. The example below shows numbers being rounded to two decimal places. Enter a number (with any number of decimals) and click the button:

Important: There are two different options provided below. The first option uses the popular Math.round method which is relatively simple. Unfortunately it is not always 100% accurate due to the way JavaScript handles numbers (see below for more information). However the errors are not serious or common so this technique is acceptable for most applications. The second option is an experimental attempt to get 100% accuracy—give it a try and tell us what you think.

Option 1: Math.round()

Add the following code to the head of your HTML page:

<script language="javascript" type="text/javascript">
function roundNumber(rnum, rlength) { // Arguments: number to round, number of decimal places
  var newnumber = Math.round(rnum*Math.pow(10,rlength))/Math.pow(10,rlength);
  document.roundform.numberfield.value = parseFloat(newnumber); // Output the result to the form field (change for your purposes)
}
</script>

Use the following code for your text field and button. To change the number of decimal places, change the number 2.

<form name="roundform">
<input type="text" name="numberfield" value="">
<input type="button" value="Round" onClick="roundNumber(numberfield.value, 2);">
</form>

 

Option 2: toFixed (beta)

This option, suggested by several contributors, uses the toFixed() method instead of Math.round. Please try it out and let us know if you encounter any bugs - we have a forum thread devoted to discussion of this topic (you might want to check that thread in any case to see what bugs currently exist).

Round:  to   decimal places
Result:    

Here's the code for the HTML head:

<script type="text/javascript">
function roundNumber(number, decimals) { // Arguments: number to round, number of decimal places
	var newnumber = new Number(number+'').toFixed(parseInt(decimals));
	document.roundform.roundedfield.value =  parseFloat(newnumber); // Output the result to the form field (change for your purposes)
}
</script>

Here's the form:

<form name="roundform">
<table border="0" cellspacing="0" cellpadding="5">
<tr>
<td>Round:</td>
<td><input type="text" name="numberfield" value="">
to
<input name="decimalfield" type="text" value="2" size="3">
decimal places</td>
</tr>
<tr>
<td>Result:</td>
<td><input type="text" name="roundedfield" value="">
<input type="button" value="Calculate" onClick="roundNumber(numberfield.value, decimalfield.value);">
</td>
</tr>
</table>
</form>

NOTE: This function should also handle numbers in scientific notation (AKA standard form or exponential notation). For example, if you have a number represented as 6.156x10-9, you'll need to convert it to the format 6.156e-9 and then use the function above. It should recognise the number, round it and return the result in ordinary decimal notation. Please let us know if you find any bugs.

 

Other Options

Math.floor Rounds downward to the nearest integer (e.g. 1.7 becomes 1.0).
Math.ceil Rounds upward to the nearest integer (e.g. 1.3 becomes 2.0).

 

Floating Point Errors

Errors occur when using Math.round and toFixed() because JavaScript's method of storing numbers is not perfect. JavaScript uses a floating-point number format which cannot store certain numbers "exactly". In other words, some numbers are approximations. This applies to all JavaScript calculations, not just rounding numbers. For example, the following equation does not provide the expected value:

var result = 4.935*100;
alert(result);

(click to see the result)

This is why, if you need accuracy, a workaround is required for rounding numbers.

Subscribe to us on YouTube