javascript interval does not stop when the equality condition meets

Question

I made a simple javascript function to change the opacity of a text box. I increment or decrement the CSS opacity property by 0.05 using the set interval function depending on whether the text is to be made visible or hidden. The starting value is 1. So decrementing 0.05 it should reach 0 in 20 intervals. I have set the condition to stop the interval when opacity reaches 0. But it doesn't really stop there and continues to decrease.

let btn = document.querySelector("button[class='opac']")
let box = document.querySelector("div[class='text']")
box.style.opacity = 1

btn.addEventListener("click", () => {
    if (box.style.opacity == 0) {
        let opacity = 0
        let id = setInterval(() => {
            opacity += 0.05
            box.style.opacity = opacity
            if (opacity == 1) {
                clearInterval(id)
            }
        }, 50);
    }
    else if (box.style.opacity == 1) {
        let opacity = 1
        let id = setInterval(() => {
            opacity -= 0.05
            box.style.opacity = opacity
            if (opacity == 0) {
                clearInterval(id)
            }
        }, 50);
    }
})

If i change the condition to (opacity <= 0), It works but the final value of the opacity is -3.19189e-16. I dont understand why is that the case.

Can you create a [small demo](https://stackoverflow.com/help/minimal-reproducible-example) for this using [jsfiddle](https://jsfiddle.net/) or [snippet](https://meta.stackoverflow.com/a/356679/1823841) here. — palaѕн, Apr 01 '20 at 13:31
try to print the actual value of opacity before the if statement — Fabrizio Calderan, Apr 01 '20 at 13:36
Does this answer your question? [Is floating point math broken?](https://stackoverflow.com/questions/588004/is-floating-point-math-broken) — Heretic Monkey, Apr 01 '20 at 13:42
To fix, either round the value using `Math.ceil` or `Math.floor` or compare the difference between the current value and the target value and if that difference is below a certain threshold, consider them equal. — Heretic Monkey, Apr 01 '20 at 13:45

score 1 · Accepted Answer · answered Apr 01 '20 at 13:36

Run this function on your caluculated opacity after calculating it

(opacity).toFixed(2); // converts 0.4986 to 0.50 , 2 digits after "."

you are using float numbers to calculate opacity, sometimes there is a little rounding error in float calculations

if you are simply trying to change opacity I recommend using css animations

@keyframes opacity-changer {
    from {opacity:1;}
    to {opacity:0;}
}

.element {
     animation-name: opacity-changer;
     animation-duration: 1s;
}

javascript interval does not stop when the equality condition meets

1 Answers1