[JS] appendChild probleem

[derdappie]

Ik ben bezig een soort google- suggest zoeksysteem te maken. Via Ajax word er xml teruggestuurd, welke door javascript geparsed word. Tijdens dit parsen worden er binnen een div (suggestions) nieuwe divjes aangemaakt via createElement. Dit gaat allemaal goed. Echter, bij het meegeven van wat functies gaat het mis.

JavaScript:

for(i=0; i<page_id.length; i++){
                    artiest = page_id[i].getElementsByTagName('item')[0].firstChild.data;
                    lay_id = page_id[i].getElementsByTagName('nummer')[0].firstChild.data;  
                    
                    //creeren DIV's
                    oDiv = document.createElement('div');
                    oDiv.id = "s"+ lay_id;
                    oDiv.innerText = artiest;
                    oDiv.className = "deselected";
                    oDiv.onclick = function() {activateItem(lay_id)};
                    oDiv.onmouseover = function() {selectItem(lay_id)};
                    
                    placeholder.appendChild(oDiv);
                
                }

(complete code is te zien in het voorbeeld)

Op deze manier worden netjes de div'jes aangemaakt, en die kan ik ook met een andere functie oproepen. Het gaat echter fout bij de onclick function. Deze zou de waarde van lay_id mee moeten krijgen, maar hij zet overal de laatste waarde neer.

voorbeeld
geparste XML

Als je een waarde invult in het invulveld, zie je dat er in de div er onder de nieuwe divjes worden geplaatst. Met de knop "pijltje naar onder" wordt de eerste layer geselecteerd. (lay_id = 0) Wanneer je echter op de 1e optie klikt met de muis, dan geeft ie waarde 5 mee (deze geeft ie bij alle layers)

Ik doe vast iets verkeerde met het aanmaken van de div's, maar ik zou niet weten wat. Iemand enig idee?

[user109731]

Je maakt in je loop de variabele lay_id aan. Dit is 1 variabele, die na de loop dus op 5 staat.
Stel nou dat er iemand op je div klikt, event word netjes getriggerd, activateItem word aangeroepen met als argument DIE lay_id, dus 5 in dit geval. Lay_id is dus geen variabele die voor elke div anders is, maar gewoon telkens één en dezelfde.

Mogelijke oplossing is bijvoorbeeld zoiets:

JavaScript:

oDiv.onclick = function() { activateItem(this.id.substr(1)); }
oDiv.onmouseover = function() { selectItem(this.id.substr(1)); }

De id is voor elke div anders, daar kun je dus *wel* wat mee doen. De id voor elke div heb je ingesteld op 's'+lay_id. Wil je lay_id dus krijgen dan hoef je enkel die 's' weg te halen, en dat gebeurt hier door substr() te gebruiken.

[ Voor 29% gewijzigd door user109731 op 12-05-2006 14:01 ]

[derdappie]

Dom ja! dank voor de reactie, met jou optie werkt het inderdaad goed.