cannot debug onmouseover event

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); }

Answer 2

just wanted to add to john, you can also do

document.getElementById( "button-container" ).addEventListener("click",function(){animation(button);},true);

insetead of "onmouseclick"

:-)

Answer 3

As @JohnFisher already mentioned, you assign the RESULT of your function to the event However I only ever use onclick. Where did you get onmouseclick from? Also you repeat your getElementById unnecessarily and have an init that is an onload so consolidate it:

window.onload = function() {
  var button = document.getElementById( "button-container" );
// button is not necessarily known or the same at the time of the click so use (this)
  button.onclick = function() { animation(this); }
  button.onmouseout = function() { disanimation(this); }
}