onmouseover event function for dom created div

[oopaevah@yahoo.co.uk]

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.srcElemen t 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.create Element( "div");
oDiv.id = "entry_" + oEntry.uniquena me;
oDiv.onmouseove r = function() {document.getEl ementById(
oDiv.id).classN ame = "hover";};
oDiv.onmouseout = function() {document.getEl ementById(
oDiv.id).classN ame = "";};

oBody.appendChi ld( oDiv)
}

[RobG]

Re: onmouseover event function for dom created div


oopaevah@yahoo. co.uk wrote:

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.srcElemen t 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.create Element( "div");
oDiv.id = "entry_" + oEntry.uniquena me;
oDiv.onmouseove r = function() {document.getEl ementById(
oDiv.id).classN ame = "hover";};

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

oDiv.onmouseout = function() {document.getEl ementById(
oDiv.id).classN ame = "";};

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

oBody.appendChi ld( oDiv)
}

--
Rob

[oopaevah@yahoo.co.uk]

Re: onmouseover event function for dom created div


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

Is this something to do with closures?

>
Yes.
>
>

Here's a much simplified example :
oDiv.onmouseove r = function() {document.getEl ementById(
oDiv.id).classN ame = "hover";};

>
oDiv.onmouseove r = function() {this.className = "hover";};
>
>

oDiv.onmouseout = function() {document.getEl ementById(
oDiv.id).classN ame = "";};

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

[ASM]

Re: onmouseover event function for dom created div

oopaevah@yahoo. co.uk 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(idStar t) {
var T = document.getEle mentsByTagName( 'div');
for(var i=0; i<T.length; i++)
if(T[i].id.indexOf(idS tart)>=0) {
T[i].onmouseover = function() { roll(this) }
T[i].onmouseout = function() { roll(this) }
T[i].style.cursor = 'pointer';
}
}
function roll(what) {
what = what.style;
what.backgoundC olor = what.backgoundC olor==''? '#ffc' : '';
}
onload = function() { setHover('new_' ); }


You can in function stHover() also have :

var T = document.getEle mentsByTagName( '*');

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.srcElemen t 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.create Element( "div");

var oDiv = document.create Element( "div");

oDiv.id = "entry_" + oEntry.uniquena me;

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

oDiv.onmouseove r = function() {document.getEl ementById(
oDiv.id).classN ame = "hover";};

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

oDiv.onmouseout = function() {document.getEl ementById(
oDiv.id).classN ame = "";};

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

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

oBody.appendChi ld( oDiv)

document.body.a ppendChild(oDiv );

}
>