IF condition is always false in this case

Question

I am trying to reduce opacity with JavaScript. But the problem is that 'if' condition is always false therefor the opacity is getting 0. Please can anyone explain why this is happening and the correct solution.

var opacity = 1;
var decrement = 0.01;
var id = setInterval(frame, 10);
function frame(){
    if (opacity == 0.4) //It is always false..
    {
        clearInterval(id);//Not able to clear Interval
    }
    else
    {
        opacity = opacity-decrement;
        document.getElementsByClassName('menu_bar')[0].style.backgroundColor='rgba(66,64,61,'+opacity+')';
    }
}

Your problem is that these are fractions represented as floating point numbers, so exact equality is not guaranteed. See: [Is floating point math broken?](https://stackoverflow.com/questions/588004/is-floating-point-math-broken) — IMSoP, Jul 09 '18 at 09:18
The problem is floating point maths. Change the if statement to `if (opacity <= 0.4)` and it will work as you expect. — Reinstate Monica Cellio, Jul 09 '18 at 09:19
@Lucif Incidentally, unless you have a specific reason for doing this with Javscript, you can achieve the exact same results with pure CSS (and no faffing around with error prone maths). — Reinstate Monica Cellio, Jul 09 '18 at 09:29

score 2 · Answer 1 · answered Jul 09 '18 at 09:19

2

 if(Math.abs(opacity - 0.4) < 0.01) {

Floating point math is "broken", therefore you have to be fault tolerant.

answered Jul 09 '18 at 09:19

Jonas Wilms

132,000
20
149
151

Aayush Sharma · Accepted Answer · 2018-07-09T09:26:11.160

1

Instead of using opacity == 0.4 in your code, try using opacity < 0.5 or opacity <= 0.4 as fractions are not very reliable in javascript.

Try running 1-0.1-0.1-0.1-0.1-0.1-0.1 (The math that happens before your == 0.4 check should return true) in your console to see what I mean.

edited Jul 09 '18 at 09:26

answered Jul 09 '18 at 09:21

Aayush Sharma

779
4
20

1

It's not just Javascript, it's pretty much every programming language since the invention of "floating point" representation. – IMSoP Jul 09 '18 at 09:22

Asons · Answer 3 · 2018-07-09T09:32:25.190

As mentioned, the floating point math is broke.

A simple fix is to use integers and divide the end result with 100.

That will also avoid any extra Math.abs, or calc, at every interval.

Stack snippet

var opacity = 100;
var decrement = 1;
var id = setInterval(frame, 10);

function frame() {
  if (opacity == 40)
  {
    clearInterval(id);
  } else {
    opacity = opacity - decrement;
    //document.getElementsByClassName('menu_bar')[0].style.backgroundColor='rgba(66,64,61,'+opacity/100+')';
    document.body.style.backgroundColor='rgba(66,64,61,'+opacity/100+')';
  }
}

score 0 · Answer 4 · answered Jul 09 '18 at 09:35

You can use opacity.toFixed(2) to restrict the decimal digits to 2, this will sole the issue

var opacity = 1;
var decrement = 0.01;
var id = setInterval(frame, 10);
function frame(){
    if (opacity.toFixed(2) == 0.40) //It is always false..
    {
        console.log("Cleared");
        clearInterval(id);//Not able to clear Interval
    }
    else
    {
        opacity = opacity-decrement;
       // document.getElementsByClassName('menu_bar')[0].style.backgroundColor='rgba(66,64,61,'+opacity+')';
    }
}

IF condition is always false in this case

4 Answers4