470,590 Members | 2,521 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 470,590 developers. It's quick & easy.

onmouseover event function for dom created div

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

Nov 7 '06 #1
3 3384

oo******@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.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 = "";};

oBody.appendChild( oDiv)
}
--
Rob

Nov 7 '06 #2

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.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 = "";};

Rob
Nov 7 '06 #3
ASM
oo******@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(idStart) {
var T = document.getElementsByTagName('div');
for(var i=0; i<T.length; i++)
if(T[i].id.indexOf(idStart)>=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.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
oBody.appendChild( oDiv)
document.body.appendChild(oDiv);
}
Nov 7 '06 #4

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

12 posts views Thread by Epetruk | last post: by
7 posts views Thread by windandwaves | last post: by
5 posts views Thread by Ryan Moore | last post: by
3 posts views Thread by drjackk | last post: by
2 posts views Thread by Justin Rowe | last post: by
5 posts views Thread by jkershner | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.