Question

/* this is our script for monopoly_first_page.html */

var result;
var button;
var image;
var x = 0;

function animation( animatedObject ){

    var hereObject = animatedObject;
    alert( hereObject );

    /*setInterval( animate( animatedObject, x ), 100 );*/

}

function animate( hereObject, x ){

        alert( x );

        if( x == 0){
            hereObject.style.width++;
        }
        else{
            hereObject.style.width--;
        }

        if( hereObject.style.width <= 225 ){
            x = 0;
        }
        if( hereObject.style.width >= 300 ){
            x = 1;
        }
}

function disanimation( animatedObject ){

    var hereObject = animatedObject;
    clearInterval();


}


window.onload = init;

function init(){

    result = document.getElementById( "result" );
    button = document.getElementById( "button-container" );
    document.getElementById( "button-container" ).onmouseclick = animation( button );
    document.getElementById( "button-container" ).onmouseout = disanimation( button );
    alert( button );
    alert( button );

}

hi every one…this is one of my source code and im a beginner…i faced a problem and it is where i wrote this statement:

document.getElementById( "button-container" ).onmouseclick = animation( button );

when function init begins to run function animation also execetues… but im sure im not rolling my mouse over the specified DIV…
what is the problem?

Answer 1

You need to pass a function to any handlers. What is happening with your code is that it calls animation(button) then sets that value to the onmouseclick property. Since the animation(...) function doesn’t return a function, nothing beneficial will happen.

This would be a lot closer.

whatever.onmouseclick = animation;  

If you need to, you could also do this: (assuming you want a specific button passed)

whatever.onmouseclick = function(e) { animation(button); }