• 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 / How to Use JavaScript to Round Up Numbers

How to Use JavaScript to Round Up Numbers

April 18, 2022 Leave a Comment

In JavaScript, to always round a number up, we can do this very easily by using the Math.ceil() method.

var num = Math.ceil(1.6);

The above code would round the number 1.6 UP to 2.

We have already written a post about the Math.ceil() method which you can learn more about here. However, with the ceil() method, it will only round a number up to the integer. What we want to take a look at is how to round up to a certain decimal place.

To do this, we just need to add an extra step to the code above. If we want to round up to the first decimal place, we have to multiply the number by 10 in the ceil function, and then divide that number by 10. Here is what it would look like below.

var num = Math.ceil(num*10)/10;

We want to round the number 2.34 up to the first decimal place. So let’s enter it in the code above.

var num = Math.ceil(2.34*10)/10;

So the result of the code above would be:

2.4

Let’s see this in action in the example below.

How to Round Up to a Certain Decimal Place in JavaScript

Below we will provide code to let the user input a number, and then use the Math.ceil() method to round the number up. We will also let the user select how many decimal places they want to round the number up to. Here is our HTML setup:

<p>Type a number with a decimal you want to round up:</p>
<input id="userVal" type="text" value="">
<p>Type the decimal place you want to round up to:</p>
<input id="userVal2" type="text" value="" placeholder="(1 for tenth, 2 for hundredth, etc...)">
<input id="submitNum" type="submit" value="Submit">
<div id="results"></div>

Below is the JavaScript and jQuery code which take the user input using the jQuery click() method, and use the Math.ceil() method on that user input and update the results below using the jQuery text() method.

Since we added the ability for the user to enter in the decimal place they want to round to, we have to add a bit more code.

The math is pretty simple, if the user wants to round to the tenth place, they enter 1. If they want to round to the hundredth place, they enter 2.

We will take whatever number they enter for this and use it as we did in the code above. We will also need the help of the Math.pow() method to do this. To make sure they don’t enter a number below 1, we will add an if else check and just use the regular ceil method result if it is below 1.

Here is the JavaScript code:

$("#submitNum").click(function(){
  var num = $("#userVal").val();
  var decimalPlace = $("#userVal2").val();
  //If number is below 0, just run the ceil function as is
  if ( decimalPlace < 1 ){
    $("#results").text(Math.ceil(num));
  } else {
    $("#results").text(Math.ceil(num*(Math.pow(10, decimalPlace)))/(Math.pow(10, decimalPlace)));
  }
});

The final code and output for this example are below:

Code Output:

Type a number with a decimal you want to round up:

Type the decimal place you want to round up to:


Full Code:

<p>Type a number with a decimal you want to round up:</p>
<input id="userVal" type="text" value="">
<p>Type the decimal place you want to round up to:</p>
<input id="userVal2" type="text" value="" placeholder="(1 for tenth, 2 for hundredth, etc...)">
<input id="submitNum" type="submit" value="Submit">
<div id="results"></div>

<script>

$("#submitNum").click(function(){
  var num = $("#userVal").val();
  var decimalPlace = $("#userVal2").val();
  //If number is below 0, just run the ceil function as is
  if ( decimalPlace < 1 ){
    $("#results").text(Math.ceil(num));
  } else {
    $("#results").text(Math.ceil(num*(Math.pow(10, decimalPlace)))/(Math.pow(10, decimalPlace)));
  }
});

</script>

Hopefully this article has been useful in helping you understand how to in JavaScript round up.

Other Articles You'll Also Like:

  • 1.  JavaScript Change Background Color of Element
  • 2.  JavaScript Map Size – Find Length of JavaScript Map
  • 3.  Using JavaScript to Check if String Contains Letters
  • 4.  Using JavaScript Math Module to Get Euler’s Constant e
  • 5.  Using JavaScript to Check if Array is Empty
  • 6.  How to Select All Checkboxes in JavaScript
  • 7.  cleartimeout JavaScript – How the clearTimeout() Method in JavaScript Works
  • 8.  JavaScript join – Create String from Elements in an Array
  • 9.  Using JavaScript to Stop a Timer
  • 10.  Set the Height of a Div Using JavaScript

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