[Javascript] probleem initialiseren events

[sjink]

Ik heb in mijn html code de volgende 5 links staan:

HTML:

<a href="#" id="link1">Link #1</a>
<a href="#" id="link2">Link #2</a>
<a href="#" id="link3">Link #3</a>
<a href="#" id="link4">Link #4</a>
<a href="#" id="link5">Link #5</a>

Nu wil ik graag met javascript de eventhandlers zetten op deze manier:

JavaScript:

var linkPrefix = "link";
var nLinks = 5;

function initLinksEventHandlers()
{
    if (document.documentElement)
    {
        for (var i = 1; i <= nLinks; i++)
        {
            var questionObject = document.getElementById(linkPrefix+i); 
            questionObject.onclick = function() { alert(i); }
        }
    }
}

window.onload = initLinksEventHandlers;

Dus als ik op link1 klikt zou die 1 moeten alerten en als ik op link2 klikt 2 enz.

Het probleem is dat hij nu overal 5 laat zien, dus de huidige of laatste waarde van i.

Ik zou natuurlijk <a href="#" onclick="alert('1')" id="link1">Link #1</a> kunnen doen, maar ik wil graag mijn javascript gescheiden houden van mijn opmaak.
Een andere optie zou zijn:

JavaScript:

document.getElementById("link1").onclick = function() { alert("1"); } 
document.getElementById("link2").onclick = function() { alert("2"); } 
document.getElementById("link3").onclick = function() { alert("3"); } 
document.getElementById("link4").onclick = function() { alert("4"); } 
document.getElementById("link5").onclick = function() { alert("5"); } 

maar dit vind ik weer vrij omslachtig en gezien het aantal van 5 puur theoretisch is en dit in de praktijk een veel groter aantal links kan zijn kan dit behoorlijk oplopen qua hoeveelheid code.

Misschien dat iemand hier een oplossing of een betere methode hiervoor heeft.

[ Voor 14% gewijzigd door sjink op 07-04-2006 09:19 . Reden: nieuwe highlight optie ]

[André]

Het komt omdat de i steeds opnieuw geset word binnen de scope van de functie, door onderstaande constructie kun je dat ondervangen

JavaScript:

var linkPrefix = "link";
var nLinks = 5;

function initLinksEventHandlers()
{
    if (document.documentElement)
    {
        for (var i = 1; i <= nLinks; i++)
        {
            var questionObject = document.getElementById(linkPrefix+i);
            questionObject.onclick = klik(this, i);
        }
    }
}

function klik(obj, nr)
{
  return function() { alert(nr); }
}

window.onload = initLinksEventHandlers;

[Verwijderd]

misschien makkelijker en directer (zou afhangen van hoe je het in gaat zetten denk ik)

JavaScript:

questionObject.onclick = function() { alert(this.id.split(linkPrefix)[1]); }

of -ik neem aan dat die a's serverside ergens vandaan komen- meteen server side dat onclick attribuut erin bakken, is nu voor allemaal hetzelfde

[ Voor 29% gewijzigd door Verwijderd op 07-04-2006 09:34 ]

[sjink]

André schreef op vrijdag 07 april 2006 @ 09:28:
Het komt omdat de i steeds opnieuw geset word binnen de scope van de functie, door onderstaande constructie kun je dat ondervangen

JavaScript:

var linkPrefix = "link";
var nLinks = 5;

function initLinksEventHandlers()
{
    if (document.documentElement)
    {
        for (var i = 1; i <= nLinks; i++)
        {
            var questionObject = document.getElementById(linkPrefix+i);
            questionObject.onclick = klik(this, i);
        }
    }
}

function klik(obj, nr)
{
  return function() { alert(nr); }
}

window.onload = initLinksEventHandlers;

tnx! werkt perfect

[sjink]

Ik heb je oplossing eens goed bekeken en ondanks dat die perfect werkt snap ik niet helemaal wat je doet en waarom je die this meegeeft. Zou je misschien nog wat meer uitleg kunnen geven

[ Voor 1% gewijzigd door sjink op 07-04-2006 09:47 . Reden: typo ]

[GrimaceODespair]

André schreef op vrijdag 07 april 2006 @ 09:28:
Het komt omdat de i steeds opnieuw geset word binnen de scope van de functie, door onderstaande constructie kun je dat ondervangen

Hoe werkt dan eigenlijk het inline fixen van een functie? Wordt in sjink zijn geval die functie maar 1x aangemaakt en 5x toegekend? Of wordt hij 5x aangemaakt, maar refereert i telkens naar de dezelfde variable (die op het einde dus 5 is)?

[Verwijderd]

this is hier overbodig, maar ik denk dat ander 'm erbij gooit om aan te geven dat je er eventueel nog iets mee zou kunnen doen.

De functie wordt 5x aangemaakt, maar de waarde van i blijft veranderen (de variabele "nr" in andre's voorbeeld wordt wel steeds opnieuw aangemaakt (met de waarde van i op dat moment), daarom gaat dat goed)

[ Voor 31% gewijzigd door Verwijderd op 07-04-2006 10:28 ]

[GrimaceODespair]

Verwijderd schreef op vrijdag 07 april 2006 @ 10:27:
this is hier overbodig, maar ik denk dat ander 'm erbij gooit om aan te geven dat je er eventueel nog iets mee zou kunnen doen.

De functie wordt 5x aangemaakt, maar de waarde van i blijft veranderen (de variabele "nr" in andre's voorbeeld wordt wel steeds opnieuw aangemaakt (met de waarde van i op dat moment), daarom gaat dat goed)

Ik ging er vanuit dat er een toekenning gebeurde van een value-variabele (itt reference-variabele), omdat je met een int te maken had, en dat na de toekenning dus de waarde vastlag. Maar hij houdt dus de referentie vast?

[crisp]

GrimaceODespair schreef op vrijdag 07 april 2006 @ 12:29:
[...]

Ik ging er vanuit dat er een toekenning gebeurde van een value-variabele (itt reference-variabele), omdat je met een int te maken had, en dat na de toekenning dus de waarde vastlag. Maar hij houdt dus de referentie vast?

Jep, het is een referentie naar de variabele 'i' in de scope van initLinksEventHandlers