How to Display Float Value up to 2 Decimal Places in Javascript

In this tutorial, you will learn how to display float value up to 2 decimal places in javascript. It is very likely that a large number of digits will follow the decimal point when we carry out a specific computation and return a decimal value. As a result, rounding a number to a certain number of decimal places is a popular practice to make it easier to read. For a newbie developer, it can be a bit tricky to display float value up to 2 decimal places.

There are numerous ways to display float value up to 2 decimal places. We are going to use the simplest approach which involves the usage of the toFixed() method. It converts the number to string and rounds it to a specified number of decimals.

In the following example, we have one global variable that holds a number. Upon click of a button, we will display  float value up to 2 decimal places and display the result on the screen. Please have a look over the code example and the steps given below.

  • We have selected 2 elements (button and h1) using the document.querySelector() method and stored them in btn and result variables.
  • We have created a global variable num that holds a decimal number as a value.
  • We have added a click event listener to the button element.
  • We are executing the toFixed() method and passing 2 as a parameter. As a result, it will round the number to 2 decimal places.
  • We will display the result in the h1 element.
let btnGet = document.querySelector('button');
let result = document.querySelector('h1');

let num = 45842.0011455;

btnGet.addEventListener('click', () => {
    result.innerText = num.toFixed(2);
});