[JS] Loop: variabele toewijzen aan function onclick()

[raps]

Beste allen,

Bij een website wil ik meerdere foto's laten zien. Deze wil ik laten switchen dmv JavaScript. Men kan klikken op: 1 2 3 ....
De links (1 2 3 ..) worden echter ook door middel van Javascript aangemaakt:

code:

// ....
// images is an array with image-id's
for (var i=0; i<images.length; i++)
{
   var imgLink = document.createElement('a');
   imgLink.href = '#';
   imgLink.onclick = function() {
      document.getElementById('sortImage').src = BASEURL + 'beheer/viewfile.php?id=' + images[i];
   }
   imgLink.innerHTML = (i+1) + ' ';
   imgContainer.appendChild(imgLink);
}
htmlContainer.appendChild(imgContainer);
// ....

Als ik nu op een van de afbeeldingen klik, wordt de afbeelding goed gewijzigd. Alleen maakt het niet uit waar ik op klik (1,2,3,4..), altijd de laatste afbeelding uit de images-array wordt weergegeven.

Het lijkt me een 'fout' die eenvoudig op te lossen is. Ik heb al veel gezocht, maar dit nog niet gevonden.

Kunnen iemand van jullie mij helpen?

Alvast bedankt!

[crisp]

scopen:

JavaScript:

imgLink.onclick = addClickHandler(images[i]);
// ...
function addClickHandler(img)
{
  return function()
  {
    document.getElementById('sortImage').src = BASEURL + 'beheer/viewfile.php?id=' + img;
  }
}

nog mooier is om de referentie naar sortImage ook ergens in een variabele op te slaan, dat scheelt weer veel lookups (maar wel kans op memory-leaks in IE...)

[raps]

crisp, hartstikke bedankt!

Dit werkt zo. Nog even wat meer informatie over 'scopen' gezocht. De oorzaak is me nu ook duidelijk. Thnx