Html output limit to 2 decimal places

I want a simple calculation form. I took te example of w3schools:

and this is myd adjusted code:

+
=


Note: The output tag is not supported in Internet Explorer.

when I add the round[2] [form oninput]then it won't work. if I remove it, it wil work. But if I add some numbers after the decimal, the I get a whole bunch of numbers with lots of zerro's.

I just want a 2 digit output.

can anyone help me please?

I also checkout this link:

parse float with two decimal places

but I can't get it to work

asked Oct 1, 2013 at 9:00

Ralph SchipperRalph Schipper

6712 gold badges10 silver badges22 bronze badges

Let's say you're multiplying 0.11 and 0.12 - both numbers with two decimal places. The result is 0.132, which has three. And that's assuming you're using numbers that can be represented accurately: most decimal numbers can't.

Rather than rounding the inputs, you should round the output:

x.value = [a.value*b.value].round[2];

That being said, I don't think round is a function to be used like that. I think you need to do this:

x.value = Math.round[a.value*b.value*100]/100;

Note that because * automatically casts its arguments to numbers [unlike +], there is no need to explicitly parseFloat.

answered Oct 1, 2013 at 9:05

Not the answer you're looking for? Browse other questions tagged javascript html or ask your own question.

To limit decimal places in JavaScript, use the toFixed[] method by specifying the number of decimal places.

This method:

1. Rounds the number.
2. Converts it into a string.
3. Returns the number as a string.

For instance:

let pi = 3.141;
let rounded = pi.toFixed[1];

console.log[rounded];

Output:

3.1

But this is just one alternative. Also, it has some caveats.

In this guide, I will show you how to:

1. Round a number with toFixed[] method and its caveats.
2. Round a number using Math.round[] function.
3. Create a generic rounding function.

1. How to Limit Decimal Places Using toFixed[] Method

In JavaScript, you can use the toFixed[] method to limit the decimal places of a number.

For instance:

let pi = 3.141;
let rounded = pi.toFixed[1];

console.log[rounded];

Output:

3.1

However, sometimes this method does not give accurate results.

For example, let’s round number 1.0005 to 3 decimals. If you are familiar with mathematics, this should give 1.001. But look what happens with the toFixed[] method:

var n = 1.0005;
n = n.toFixed[3];

console.log[n];

Output:

1.000

It falsely rounds the number down to 1.000 instead of correctly rounding it up to 1.001.

This is where other ways to round numbers in JavaScript are useful.

2. How to Limi Decimal Places with Math.round[] Function

To limit, that is, round a number to n decimal places, use the built-in Math.round[] function.

For example, let’s round a number to 2 decimal places.

var n = 2.781;
var rounded = Math.round[n * 100] / 100;

console.log[rounded];

Output:

2.78

But this approach also has the same caveat as the previous one. Values such as 1.005 get falsely rounded to 1 instead of 1.01:

var n = 1.005;
var rounded = Math.round[n * 100] / 100;

console.log[rounded];

Output:

1

To avoid this issue, use the Number.EPSILON this way:

var n = 1.005;
var rounded = Math.round[[n + Number.EPSILON] * 100] / 100;

console.log[rounded];

Output:

1.01

3. Create a Generic Rounding Function

In the previous example, you learned how to round numbers using Math.round[] with number.EPSILON.

But the example only showed you how to round to 2 decimal places.

What if you want to round to n decimal places?

Let’s write a generic rounding function for that.

• If you want to round to 1 decimal, you need to multiply by 10, round, and divide by 10 [10^1].
• For 2 decimals multiply and divide by 100 [10^2].
• For n decimals, multiply and divide by 10^n.

Let’s write a generic rounding function and extend the Number.prototype with it. This way you can call .round[] on any numeric type in JavaScript.

Number.prototype.round = function[n] {
  const d = Math.pow[10, n];
  return Math.round[[this + Number.EPSILON] * d] / d;
}

Example use:

1.005.round[2] // Returns 1.01
1.22.round[0]  // Returns 1

Notice how this will also result in problems when rounding numbers close to the built-in floating-point accuracy.

For instance:

1.32.round[16] // Returns 1.3200000000000003

Conclusion

Today, you learned how to limit decimal places in JavaScript.

To recap, you can use the .toFixed[] method to limit decimal places. But this has some rounding issues. To overcome those, you can use Math.round[] with number.EPSILON.

Thanks for reading.

Happy coding!

Further Reading

100 JavaScript Interview Questions

How do I limit the number of decimal places in HTML?

How do I put 2 decimal places in HTML?

How do you limit decimal places to 2?

How do I limit the number of decimal places in JavaScript?