Question

I have some problem with javascript event handlers and I really want to know what am I doing wrong.
Here’s the thing, I want to alert the hovered div’s width, but as soon as the page is loaded, the alert appears.

Here’s the HTML:

<div id="mainContainer">  
    <div id="container_1" style="width:200px"></div>  
    <div id="container_2" style="width:100px"></div>  
    <div id="container_3" style="width:300px"></div>  
    <div id="container_4" style="width:150px"></div>  
</div>

and here’s the js:

dataRetrieving = {
    getWidth:function(id){
        var box = document.getElementById(id);
        var tempResult = box.style.width;
        return tempResult;
    }
}
var container = document.getElementById("container_1");
container.onmouseover = function(){
    alert(dataRetrieving.getWidth("container_1"));
};

already answered, thanks 😀

I’d appreciate any tip you guys give me.

Thanks in advance!

Answer 1

You would need to set your onmouseover with something like this:

container.onmouseover = function(){
  dataRetrieving.getWidth("container_1");
};

In your current code, the event handler (set to container.onmouseover) is set to the result of dataRetrieving.getWidth(...) – which is nothing, since getWidth doesn’t currently return anything. This is also causing the alert to appear immediately, since the function is executing immediately. (In order to be valid, it would have to return another function.)