How do i put 2 decimal places in html?

I used @carpetofgreenness's answer in which you listen for input event instead of change as in the accepted one, but discovered that in any case deleting characters isn't handled properly.

Let's say we've got an input with the value of "0.25". The user hits "Backspace", the value turns into "0.20", and it appears impossible to delete any more characters, because "0" is always added at the end by the function.

To take care of that, I added a guard clause for when the user deletes a character:

if [e.inputType == "deleteContentBackward"] {
  return;
}

This fixes the bug, but there's still one extra thing to cover - now when the user hits "Backspace" the value "0.25" changes to "0.2", but we still need the two digits to be present in the input when we leave it. To do that we can listen for the blur event and attach the same callback to it.

I ended up with this solution:

const setTwoNumberDecimal = [el] => {
  el.value = parseFloat[el.value].toFixed[2];
};

const handleInput = [e] => {
  if [e.inputType == "deleteContentBackward"] {
    return;
  }
  setTwoNumberDecimal[e.target];
};

const handleBlur = [e] => {
  if [e.target.value !== ""] {
    setTwoNumberDecimal[e.target];
  }
};

myHTMLNumberInput.addEventListener["input", handleInput];
myHTMLNumberInput.addEventListener["blur", handleBlur];

This tutorial will teach us how to format a number with two decimals using JavaScript. Formatting a number means rounding the number up to a specified decimal place. In JavaScript, we can apply many methods to perform the formatting. Some of them are listed as follows −

• The toFixed[] Method

• Math.round[] Method

• Math.floor[] Method

• Math.ceil[] Method

The toFixed[] Method

The toFixed[] method formats a number with a specific number of digits to the right of the decimal. it returns a string representation of the number that does not use exponential notation and has the exact number of digits after the decimal place.

Syntax

Following is the syntax format for a number up to 2 decimals using the toFixed[] method −

number.toFixed[2];

In the above syntax toFixed[] is the method of formatting a number with twoIn the above syntax toFixed[] is the method of formatting a number with two decimals in JavaScript and number is the number to be formatted with two decimals.

Algorithm

• STEP 1 − Declare a variable named “num” and assign a number to the variable.
• STEP 2 − Compute num.toFixed[2]. The result is formatted with two decimals.
• STEP 3 − Display the result on the user screen

Example 1

The example below will illustrate numbers before and after formatting in JavaScript.

   JavaScript Number toFixed[]
   format a number with two decimals:
   Number before formatting:
   Number After formatting:
   
      var number = 9.1291754;
      document.getElementById["number"].innerHTML += number;
      var fixedNum = number.toFixed[2];
      document.getElementById["result"].innerHTML += fixedNum;
   

In the above program, we have used the number.toFixed[2] rounds a number to the number with two decimal positions. 9.1291754 will be rounded down to [9.13].

Math.round[]

The Math.round[] method returns the given numeric expression rounded to its nearest number. We will use the method to format a number with two decimals. Please have a look at the below syntax.

Syntax

Following is the syntax for rounding off a given number in JavaScript −

Math.round[num*100]/100;

In the above syntax Math.round[] is the method of formatting a number and num is the number to be formatted with two decimals.

Algorithm

• STEP 1 − As a first step, we will create a variable named “number” and assign a value to it.
• STEP 2 − Now we compute Math.round[] and assign it to a new variable fixedNum, i.e. var fixedNum = Math.round[number*100]/100.
• STEP 3 − The last or the third step will display the result on the user screen

Example 2

The example below will illustrate numbers before and after formatting in JavaScript.

   JavaScript Math.round[]
   format a number with two decimals
   Number before formatting:
   Number after formatting:
   
      const number = 9.1291754;
      document.getElementById["number"].innerHTML += number;
      const fixedNum = Math.round[number*100]/100;
      document.getElementById["result"].innerHTML += fixedNum;
   

In the above program, we have used the Math.round[] method which rounds a number to a number with two decimal positions. 9.1291754 will be rounded down to [9.13].

Math.floor[] Method

The Math.floor[] method returns the greatest integer less than or equal to its argument. But we can use this method to format a number with two decimals.

Syntax

Following is the syntax to format a number with two decimals using Math.floor[] method −

Math.floor[num*100]/100

Here num is the number to be formatted with two decimals

Example 3

In the below example, we format 9.1291754 to a number with two decimals. We use of Math.floor[] method for formatting the number.

   JavaScript Math.floor[] Method
   Format a nubmer with 2 decimals:
   
   
   
      var num = 9.1291754;
      document.getElementById["input"].innerHTML = "Number before Format:
 " + num;
      var formatNum = Math.floor[num*100]/100;
      document.getElementById["result"].innerHTML = "Number after format :
 " + formatNum;
   

Math.ceil[] Method

The Math.ceil[] method returns the smallest integer greater than or equal to the number. We could apply this method to format a number to the number with two decimals.

Syntax

Following is the syntax to format a number with twodecimals −

Math.ceil[num*100]/100

Here num is the float number to be formatted with two decimals

Example 4

In the below example, we format 9.1291754 to a number with two decimals We use of Math.ceil[] method for formatting the number.

   JavaScript Math.ceil[] Method
   Format a number with 2 decimals:
   
   
   
      const num = 9.1291754 ;
      document.getElementById["input"].innerHTML = "Number before Format:
 " + num;
      const formatNum = Math.ceil[num*100]/100;
      document.getElementById["result"].innerHTML = "Number after format :
 " + formatNum;
   

In this tutorial, we have discussed four methods to format a number with two decimals. Please see note the difference between the results in the different examples. Notice why Math.floor[] method gives a different result. Can you try with different numbers and find which of the methods gives a different result from the others?

Updated on 05-Sep-2022 07:03:00

• Related Questions & Answers
• How to format a rounded number to N decimals using JavaScript?
• How to display two decimals in MySQL/PHP?
• How to format hexadecimal Number in JavaScript?
• Java Program to round number to fewer decimals
• Checking if decimals share at least two common 1 bits in JavaScript
• Dividing a floating number, rounding it to 2 decimals, and calculating the remainder in JavaScript
• How do I format the axis number format to thousands with a comma in Matplotlib?
• How to format a JavaScript date?
• How to format a float in JavaScript?
• Format amount values for thousands number with two decimal places in MySQL?
• How to format number in JSP?
• How to convert a String containing Scientific Notation to correct JavaScript number format?
• Manipulate decimals with numeric operators in C#
• How to convert a date object to string with format hh:mm:ss in JavaScript?
• Finding two prime numbers with a specific number gap in JavaScript

How do you put a decimal number in HTML?

How do I reduce decimal places in HTML?

How do you display upto 2 decimal places?