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