Weird JavaScript incrementing behavior

Question

When I'm spam clicking on the button it sometimes changes the number of decimals. Why?

<!doctype html>
<html>

<head>

</head>

<body>

<button onmouseover="showSomething()" onmouseout="hideSomething()" onclick="addSomething()">Show something</button>
<p id="show"></p>

<script>

function showSomething() {
 x = Math.random()*100;
 x = x.toFixed(2);
 document.getElementById("show").innerHTML = x;
}

function hideSomething() {
 document.getElementById("show").innerHTML = "";
}

function addSomething() {
 x++;
 document.getElementById("show").innerHTML = x;
}

</script>

</body>

</html>

Be patient, it's gonna occur after some time. Try different numbers. — user5097157, Jul 09 '15 at 06:54
@user5097157 you're probably moving your mouse in and out without realizing it. it works fine. — dmlittle, Jul 09 '15 at 06:55
this comes down to .... `console.log(0.1 + 0.2)` - floating point FTW — Jaromanda X, Jul 09 '15 at 06:56
@dmlittle I'm not even moving my mouse, after 1st click I just push enter. — user5097157, Jul 09 '15 at 06:56
I think the problem occurs when on mouseenter number is say 32.40, then on incrementing it displays 33.4 instead of 33.40 — Nikhil Batra, Jul 09 '15 at 06:56
No, he's right, after a while on some numbers it passes for example from a NN.74 to NN.7399999995 number. Some kind of wrong round thing — Julo0sS, Jul 09 '15 at 06:57
if it's the number of decimals because 33.40 gets converted to 33.4, then you can use `x.toFixed(2)` when you set the innerHTML. — dmlittle, Jul 09 '15 at 06:58
The bug comes from your Math.round and "toFixed" for this number. Try, for example, to math.round a number from 0 to 10000. Then divide it by 100 and toFixed(2), think this will not occur again — Julo0sS, Jul 09 '15 at 07:00
You should check how binary floating numbers work: http://programmers.stackexchange.com/questions/101163/what-causes-floating-point-rounding-errors — nowhere, Jul 09 '15 at 07:11

score 0 · Answer 1 · answered Jul 09 '15 at 06:57

0

Should fix your bug.

function addSomething() {
    x++;
    x = x.toFixed(2);
    document.getElementById("show").innerHTML = x;
}

answered Jul 09 '15 at 06:57

noa-dev

3,561
9
34
72

Yea, it probably would, but I don't really care about the bug, I just want to understand why :) – user5097157 Jul 09 '15 at 06:58
Because math? You are trying to round up to 2 decimals at the mousenter event but you never do that in the click event. These kind of things can also occur when u are calculating with absolute numbers in any language – noa-dev Jul 09 '15 at 07:00
1

it's a feature floating point numbers – Jaromanda X Jul 09 '15 at 07:00
the problem is explained here: http://programmers.stackexchange.com/questions/101163/what-causes-floating-point-rounding-errors – nowhere Jul 09 '15 at 07:11

Weird JavaScript incrementing behavior

1 Answers1