onmouseover event function for dom created div

[oopaevah]

I have written some dom code to create a list of divs, each with it's
own id. I want to set the onmouseover and onmouseout events to
highlight the div when the mouse is over it. However I cannot use the
method below because oDiv.id is always set to the last div I create -
so the last div is highlighted regardless of which div I am onmouseover
This must be a common issue, how do I go about fixing it?

I can have a separate function which takes event.srcElement and tracks
back through the parent elments until it finds a div with an id
starting with "entry_" but I was hoping for an easier option.

Is this something to do with closures?

Here's a much simplified example :

for( nIndex=0; nIndex<aEntries.length; nIndex++)
{
oEntry = aEntries[nIndex];

oDiv = document.createElement( "div");
oDiv.id = "entry_" + oEntry.uniquename;
oDiv.onmouseover = function() {document.getElementById(
oDiv.id).className = "hover";};
oDiv.onmouseout = function() {document.getElementById(
oDiv.id).className = "";};

oBody.appendChild( oDiv)
}

 

[RobG]

I have written some dom code to create a list of divs, each with it's
own id. I want to set the onmouseover and onmouseout events to
highlight the div when the mouse is over it. However I cannot use the
method below because oDiv.id is always set to the last div I create -
so the last div is highlighted regardless of which div I am onmouseover
This must be a common issue, how do I go about fixing it?

You have discovered closures. Each mouse event gets a reference to the
same id variable, so they all get the same value.

I can have a separate function which takes event.srcElement and tracks
back through the parent elments until it finds a div with an id
starting with "entry_" but I was hoping for an easier option.

There is no need for that, or to use getElementById.

Is this something to do with closures?
Yes.


Here's a much simplified example :

for( nIndex=0; nIndex<aEntries.length; nIndex++)
{
oEntry = aEntries[nIndex];

oDiv = document.createElement( "div");
oDiv.id = "entry_" + oEntry.uniquename;
oDiv.onmouseover = function() {document.getElementById(
oDiv.id).className = "hover";};

oDiv.onmouseover = function() {this.className = "hover";};

oDiv.onmouseout = function() {document.getElementById(
oDiv.id).className = "";};

oDiv.onmouseout = function() {this.className = "";};

 

[oopaevah]

Thanks a lot Rob, I knew it would need a problem coming up in one of my
own projects before I understood closures!

The solution is even easier than I hoped for

 

[ASM]

(e-mail address removed) a écrit :

I have written some dom code to create a list of divs, each with it's
own id. I want to set the onmouseover and onmouseout events to
highlight the div when the mouse is over it.

Supposing id of all these new divs begin with 'new_'

function setHover(idStart) {
var T = document.getElementsByTagName('div');
for(var i=0; i<T.length; i++)
if(T.id.indexOf(idStart)>=0) {
T.onmouseover = function() { roll(this) }
T.onmouseout = function() { roll(this) }
T.style.cursor = 'pointer';
}
}
function roll(what) {
what = what.style;
what.backgoundColor = what.backgoundColor==''? '#ffc' : '';
}
onload = function() { setHover('new_'); }


You can in function stHover() also have :

var T = document.getElementsByTagName('*');

and it'll work with each tag of the file.

However I cannot use the
method below because oDiv.id is always set to the last div I create -
so the last div is highlighted regardless of which div I am onmouseover

Je ne comprends pas.
Why the new div is set *to* the previous one ?

This must be a common issue, how do I go about fixing it?

I can have a separate function which takes event.srcElement and tracks
back through the parent elments until it finds a div with an id
starting with "entry_"

Ha! my example above is of no use !

but I was hoping for an easier option.

Is this something to do with closures?

Here's a much simplified example :

for( nIndex=0; nIndex<aEntries.length; nIndex++)
{
oEntry = aEntries[nIndex];

var oEntry = aEntries[nIndex];

oDiv = document.createElement( "div");

var oDiv = document.createElement( "div");

oDiv.id = "entry_" + oEntry.uniquename;

oDiv.onmouseover = function() { roll(this); }
oDiv.onmouseout = function() { roll(this); }

oDiv.onmouseover = function() {document.getElementById(
oDiv.id).className = "hover";};

oDiv.onmouseover = function() { this.className = 'hover';};

oDiv.onmouseout = function() {document.getElementById(
oDiv.id).className = "";};

oDiv.onmouseout = function() { this.className = '';};

oDiv.style.cursor = 'pointer'; // if not in styles sheet