How to manage requestAnimationFrame in Javascript

Question

JavaScript:

var chop1 = document.getElementById("chop1");
var hit = document.getElementById("butn");
chop1.style.position = "relative";
chop1.style.top = "0px";
var chopperY;
function fly() 
 {

chop1.style.top = parseInt(chop1.style.top ) + 10 + 'px';
chopperY = chop1.style.top;
if( chopperY  == 500)
    {
  alert("get the position")
     }
requestAnimationFrame(fly);

};
hit.onclick = function()
{
  fly();
};

In the above example nothing is alerted at chopperY == 500.Console doesn't give any error.What is error in this code?How to alert that string at the given condition?

Answer 1

The style.top property of an HTML node is always a string containing both the position and the unit (in your case it would be a 'px'), so in your conditional statement you should rather write if (chop1 === '500px') {...}.