[Erledigt] onclick-event per Array in Schleife verwenden

[Arne Drews]

Hab gleich mal die nächste Frage.

Folgende Ausgangssituation:

var targets = new Array('ziel1', 'ziel2');
var links = new Array(document.getElementById('link1'), document.getElementById('link2'));

links[0].onclick = function() { window.location = targets[0] };
links[1].onclick = function() { window.location = targets[1] };

Aufd diese Weise verzweigt er bei Klick auf den entsprechenden Link zum richtigen Ziel.
Wenn ich jetzt aber das ganze in eine Schleife setze:

var targets = new Array('ziel1', 'ziel2');
var links = new Array(document.getElementById('link1'), document.getElementById('link2'));

for(x=0; x<links.length; x++) links[x].onclick = function() { window.location = targets[x]; };

erzeugt er mir für jedes targets[x] ein "undefined"!
Habe anstelle von window.location ein alert() verwendet, wo ganz deutlich zu sehen ist, daß es ohne Schleife geht, mit aber nicht.

Mache ich einen Gedankenfehler?
Oder ist das normal, daß das so nicht funktioniert?

Hab im Netz keine richtige Antwort gefunden.
Es wäre kein Problem die Zeilen einzeln aufzuführen, aber da ich sowieso das Array durchlaufe, hätte ich dies gerne mit reingenommen.

Bin gespannt, was ich nicht bedacht habe?!

[Asipak]

var x = 0

muss es heißen, oder? Und die geschweiften Klammern des for-Blocks würde ich auch immer setzen.

[Arne Drews]

Habe die var-Variante bereits probiert und Klammern waren auch mal drum, weil ich es wie geasgt bereits in einer anderen Schleife drin hatte.
Rausgenommen habe ich es da eben aus dem Grund, weils ein undefined gab.

Hab's auch grad nochmal probiert mit dem var, und bleibt undefined...

[Asipak]

Läuft die Schleife denn überhaupt?

[Arne Drews]

Jo

Habe anstelle von window.location ein alert() verwendet...

Da kamen ja entsprechende Ausgaben, eben nur 'undefined'.

[rudygotya]

Meinst du vielleicht window.location.href ? location selbst ist ein Objekt, das du nicht mit einem String überschreiben solltest. Einfach mal in firebug in der Konsole console.log(window.location) eingeben, dann siehst du gleich alle Properties.

p.s.: die Array Schreibweise kannste auch abkürzen.
Nur paar bsp.:

var foo = [];
var foo2= [1,2,3];
var bar = [[1,2,3], [2,34,7]] 

grüße

[Arne Drews]

Danke für den Tipp!
window.location.href ist allerdings auch nicht die Lösung.
Wie gesat, ohne Schleife mit direkter Angabe der Array-Elemente funktionierts ja.
Erst, wenn ich es per Schleife regeln möchte, komt undefined für die Array-Elemente.

Mir kommt es so vor, als ob das Array targets in der onclick-Funktion mit mal nicht mehr bekannt ist.
Kann das sein?

Wenn ja, was kann ich dagegen tun?
Eine Übergabe des Array an die Funktion hat auch nicht geholfen. Schon probiert.

[Asipak]

Da das Array außerhalb der Funktion deklariert wird, sollte es eigentlich global verfügbar sein.

Gibt

alert(x);

innerhalb der Funktion etwas aus?

[Arne Drews]

Innerhalb der Funktion wird immer 2 ausgegeben.
Das is ja klar, daß dann undefined kommt... Hmmmm...
Aber warum ist das immer 2? Er müßte doch in den Durchläufen immer die entsprechenden Werte aus dem Array setzen, oder nicht?

[Asipak]

Hmm, 2 wird x ja erst, wenn die Schleife ganz durchlaufen wurde, da du 2 Einträge hast und x nach dem letzten Eintrag dann auf 2 gesetzt wird und damit die Bedingung nicht mehr erfüllt.

Das hört sich für mich so an, als ob die Schleife durchlaufen, aber erst nach der Schleife der Ausdruck mit der Funktion ausgewertet wird. Wie sieht denn dein Code aktuell aus? Hast du die geschweiften Klammern auch wieder gesetzt?

Ansonsten habe ich gerade keine Idee mehr.

[fab]

In der Schleife definierst du nur die Funktion, exakt so wie geschrieben. Wenn die Funktion dann aufgerufen wird, wird x aus dem global scope benutzt, da die Schleife zu dem Zeitpunkt durchgelaufen ist, ist das eben 2.

[Arne Drews]

Aktueller Code (lediglich Variablennamen und Linknamen verändert):

var targets = new Array('ziel1', 'ziel2');
var links = new Array(document.getElementById('link1'), document.getElementById('link2'));

for(var x=0; x<links.length; x++) {
  links[x].onclick = function() { window.location = targets[x]; };
}

und auch mit window.location.href kommt dennoch undefined.
Ich such auch schon im Netz weiter...

Aber danke Dir für Dein Kopfzerbrechen.



Öhmmm... @fab
Soweit is mir das klar. Aber er muss doch in der Schleife z.B. zum Zeitpunkt x=1 folgendes interpretieren:

links[1].onclick = function() { window.location = targets[1]; };

[Asipak]

In der Schleife definierst du nur die Funktion, exakt so wie geschrieben. Wenn die Funktion dann aufgerufen wird, wird x aus dem global scope benutzt, da die Schleife zu dem Zeitpunkt durchgelaufen ist, ist das eben 2.

Ah, macht Sinn und erklärt damit auch dein Problem, Arne.

[edit]

Soweit is mir das klar. Aber er muss doch in der Schleife z.B. zum Zeitpunkt x=1 folgendes interpretieren:

links[1].onclick = function() { window.location = targets[1]; };

Dort steht nach dem Durchlaufen der Schleife aber offenbar folgendes:

links[0].onclick = function() { window.location = targets[x]; };
links[1].onclick = function() { window.location = targets[x]; };

Das ist das Problem.

[fab]

Öhmmm... @fab
Soweit is mir das klar. Aber er muss doch in der Schleife z.B. zum Zeitpunkt x=1 folgendes interpretieren:

links[1].onclick = function() { window.location = targets[1]; };

Nein, das ist dir nicht klar, denn zu dem Zeitpunkt wird überhaupt nichts interpretiert.

Edit: Eine Lösung könnte so aussehen (ungetestet)

var targets = new Array('ziel1', 'ziel2');
var links = new Array(document.getElementById('link1'), document.getElementById('link2'));
var createOnClick = function(index) { var target = targets[index]; return function() { window.location.href = target; } };
for(var x=0; x<links.length; x++) {
  links[x].onclick = createOnClick(x);
}

[Arne Drews]

Oh man...
Klar fab, Du hast recht!

Verdammt, hast Du vielleicht noch'n Verbesserungsvorschlag?
Ah so, hast schon ne Idee. Probier ioch gleich mal. Danke!