javascript events handlers don't work properly

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 :D

I'd appreciate any tip you guys give me.

Thanks in advance!

score 2 · Accepted Answer · answered Dec 23 '11 at 03:33

2

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.)

answered Dec 23 '11 at 03:33

ziesemer

27,712
8
86
94

But how come the event is triggered without the mouse entering the div? I changed the code so `getWidth` could return `tempResult` and alert the result only after the `container.mouseover` event handler, but the problem still remains. PS: oh, and your solution did work, I just want learn a little bit more :D thanks – rockleegustavo Dec 23 '11 at 03:53
It has nothing to do with the mouse movement. In the original code you posted, the `getWidth` function is being executed immediately as part of the `container.onmouseover = ...` line, which results in the `alert` being called. Right now, it's still calling `alert` immediately. (You simplified it, so it should be easier to see what and why it's happening now.) If you make the edit that I suggested above, you should see the results you expect. – ziesemer Dec 23 '11 at 03:59
I changed the code just like you wanted and it worked nice. I just want to know why `container.onmouseover = alert(dataRetrieving.getWidth("container_1"))` don't work :/ – rockleegustavo Dec 23 '11 at 04:14
Because alert is being called immediately (it is being immediately evaluated as soon as the JavaScript interpreter processes that line), where as it is being expected to return a function that can be called when the event actually happens. By essentially wrapping that statement in a function block, you're then meeting this requirement, and providing a function that can be called. – ziesemer Dec 23 '11 at 04:19
Oooooooooohh, now I got it! Thank you so much, ziesemer. I've been struggling with this since yesterday! Thanks :D – rockleegustavo Dec 23 '11 at 04:26

score 1 · Answer 2 · answered Dec 23 '11 at 03:34

1

container.onmouseover = dataRetrieving.getWidth("container_1");

You are calling that function there that's why it's alerting on the page load.

answered Dec 23 '11 at 03:34

Bhesh Gurung

50,430
22
93
142

javascript events handlers don't work properly

2 Answers2