I have a own made grid system, and i have to calculate every size for a column.

In each row fits 12 columns. Wich is the case in every example code i'm going to give below.

When calculating the percentages for the grid sizes, these numbers are not always whole numbers, mostly like:

99.98029427220177
100.01970572779821
100.0146484375
100.009765625
100.01464843750001
100.00976562499999

When i use Math.floor in javascript i get this:

94
96
98
99
98
99

And this is want i want:

100
100
100
100
100
100

So all rounded up to a whole percentage.

I have a own made grid system, and i have to calculate every size for a column.

In each row fits 12 columns. Wich is the case in every example code i'm going to give below.

When calculating the percentages for the grid sizes, these numbers are not always whole numbers, mostly like:

99.98029427220177
100.01970572779821
100.0146484375
100.009765625
100.01464843750001
100.00976562499999

When i use Math.floor in javascript i get this:

94
96
98
99
98
99

And this is want i want:

100
100
100
100
100
100

So all rounded up to a whole percentage.

• javascript

• 1 Math.floor(99.98029427220177) == 99 ... how are you getting those results? – Ja͢ck Commented Jun 14, 2014 at 16:14
• 1 the results you posted are wrong. jsfiddle.net/439yr The first value is 99 and the other values will be floored to 100. – Nico O Commented Jun 14, 2014 at 16:14
• And why do you use Javascript to calculate the widths of grid columns? You can do all this with css only. – Nico O Commented Jun 14, 2014 at 16:20

2 Answers 2

Math.round(x)

--

Example:

Math.round(99.5) == 100

Math.round(99.49) == 99

There are two ways to accomplish this.

1. If you are just presenting the value to the DOM then the built in JavaScript toFixed() method is what you are looking for:

Here I'll give a quick rundown:

(99.790980).toFixed() # => "100"
(99.790980).toFixed(1) # => "99.8"
(100.23232).toFixed() # => "100"
(100.23232).toFixed(1) # => "100.2"

Most of the time, these values are being shoved into the DOM. Under the scenes, Number gets converted with toString() for the browser to draw it to the screen. This is a really simple, built-in API for Number. Keep in mind that you get a String as a return value. If you want to convert it back to a Number type to continue math then you can use the following pattern:

function preciseMathDotRound(value, precision = 0) {
  return parseFloat(value.toFixed(precision));
}

// preciseMathDotRound(99.919191) == 100
// preciseMathDotRound(99.919191, 1) == 99.9

2. Math.round is a Math API for rounding numbers. The API does not include precision so it only rounds to the nearest integer. The return value is a number.

   Math.round(99.790980) # => 100 Math.round(100.23232) # => 100