onclick handler

[Felix Riesterer]

Liebe(r) s86s,

Du bist in eine Falle getappt, denn Du benutzt eine Variable, die in einer Closure steckt. Deshalb verhält sich Dein Code anders, als Du es erwarten würdest.

function prepareLinks() {

var a = document.getElementsByTagName('a');
alert (a.length);
for (i=0; i<a.length; i++) {
var uri = a[i].getAttribute('href');
a[i].setAttribute('href', '#');
//a[i].setAttribute('onclick', 'tracker(''+uri+'');');
a[i].onclick = function() {tracker(uri);};
}
}

  
Zuerst fällt mir auf, dass Du eine Variableninstanziierung (oder wie auch immer man das nennt) mit dem Schlüsselwort "var" in einer Schleife mehrfach tust. Meines Wissens sollte das spätestens beim zweiten Schleifendurchlauf zu einer Fehlermeldung führen. Besser Du notierst ein "var uri;" nach oder vor Deinem "var a = ...;". Dann kannst Du in der Schleife "uri" ohne var davor benutzen.  
  
Dann kommt der eigentliche Irrtum: Die Variable "uri" wird in der Schleife mit einem Wert befüllt. Dann wird in der Schleife ein Funktionsobjekt notiert, welches als Wert der onclick-Eigenschaft von a[i] zugewiesen wird. Es ist nun eine Eigenschaft von JavaScript, dass "uri" als Variablenobjekt innerhalb des Funktionsobjekts bekannt ist (daher kann der Wert aus "uri" verwendet werden), sodass auch Änderungen am Wert dieser Variable mit "erinnert" werden. Diesen Zusammenhang nennt man "Closure".  
  
Wenn also i=0 ist, dann hat uri irgendeinen Wert. Der wird a[0] NICHT zugewiesen, sondern eine Referenz auf das Variablenobjekt "uri". Wenn später die Funktion in a[0].onclick aufgerufen wird, dann wird nachgeschaut, welchen Wert "uri" \_aktuell\_ hat und dieser dann benutzt. Du kannst Dir sicherlich denken, dass bei i=1 der Inhalt von "uri" mit einem neuen Wert befüllt wird, welcher dann sowohl in a[0].onclick als auch a[1].onclick Verwendung finden wird... um vom letzten Schleifendurchlauf dann zum letzten Mal ersetzt zu werden.  
  
Alle Deine a-Elemente haben in ihrer onclick-Methode also einen identischen "uri"-Wert!  
  
Dein Problem lässt sich einfacher lösen, als Du denkst. Wenn Du genau überlegst, dann wirst Du bestätigen können, dass "uri" lediglich das aktuelle Linkziel enthält. Stimmt's? Das bekommst Du auch anders, denn bei Aufruf von onclick ist innerhalb der Funktion das Schlüsselwort "this" eine Referenz auf das angeklickte a-Element selbst. Mittels "this.href" kannst Du nun also "uri" ersetzen und diese Variable restlos entsorgen:  
  
~~~javascript
for (i=0; i<a.length; i++) {  
    a[i].onclick = function() {tracker(this.href);};  
}

Liebe Grüße,

Felix Riesterer.