Question

I am stumped. What I want to do is: whenever my mouse pointer enters a box, I want to keep changing the color of the box. However, when mouse leaves the box I want the color of the box to stop changing. I must admit that I am learning JS and scope of variables is giving me hard time.

Here you go:

 var t = true;
 Crafty.addEvent(this,Crafty.stage.elem,"mousemove",function(e){
    if(e.clientX<294)
    {
        console.log("Left edge");
       while(t==true){do something}

    }
    else if(e.clientY<10)
    {
        console.log("Top Edge");


    }
    else if(Math.abs(e.clientX-1084)<10)
    {

        console.log("Right Edge");


    }
    else if(Math.abs(e.clientY-600)<10)
    {
       // console.log("Bottom Edge");


    }
    else
    {
         t = false;
    }




});

To be more clear, I want to perform an operation when mouse is outside a box(I hope both cases are equivalent: out side a box is still a box). Above code goes into infinite loop.

Answer 1

Like this? http://jsfiddle.net/2eWkN/

var box = document.getElementById('box'),
    changeColor = function() {
        var r = ~~(Math.random() * 255),
            g = ~~(Math.random() * 255),
            b = ~~(Math.random() * 255);
        box.style.backgroundColor = "rgb(" + r + ',' + g + ',' + b + ')';
    },
    intvl;

box.onmouseover = function() {
    intvl = setInterval( changeColor, 50 );
};
box.onmouseout = function() {
    clearInterval( intvl );
};