Werte in dynamisch erzeugte Funktion einsetzen

[MudGuard]

Hi,

ich erzeuge in einer Schleife neue Links. Funktioniert auch wunderprächtig.

  
var parentOfLinks = document.getElementById("linkliste");  
if (parentOfLinks)  
{  
    for (var ix = 0; ix < 10; ix++)  
    {  
        var aLink = document.createElement("a");  
        aLink.href="#link_no_" + ix;  
/*****/ aLink.onclick = function() { alert('clicked'); return false; }  
        aLink.appendChild(document.createTextNode("Link Nr. " + ix));  
        parentOfLinks.appendChild(aLink);  
    }  
}  

Soweit überhaupt kein Problem, die Links erscheinen im Dokument, haben den gewünschten Text, in der Statuszeile erscheint beim Überfahren der korrekte Fragment Identifier, beim Anklicken erscheint der Alert (und der Sprung zum Fragment Identifier unterbleibt dank return false;).

Jetzt hätte ich aber gerne in der onclick-Handler-Funktion ganz gerne noch eine zur Erzeugungszeit festgelegte Variable (als einfaches Beispiel nehm ich hier mal das ix, es geht ja ums Prinzip - in der Echt-Anwendung werden es mehrere String-Variablen sein)

Also hab ich die /*****/-markierte Zeile geändert:

  
aLink.onclick = function() { alert('clicked ' + ix); return false; }  

Das ändert auch was, aber leider nicht ganz so wie gewünscht.
Egal welchen der Links ich anklicke, es wird der Wert für ix ausgegeben, der zum Klickzeitpunkt aktuell ist (in dem Fall also immer die 10). Ich hätte aber gerne den Wert, der zum Erzeugungszeitpunkt der Funktion aktuell ist. Wie kann ich den in die function einsetzen?

Seite zum Selberprobieren: http://temp.andreas-waechter.de/linktest.html

In Realitas schaut das dann natürlich ganz anders aus (es wird eine Link-Liste aufgebaut usw.) - für den Prinzip-Test reicht das aber aus.

TIA,
cu,
Andreas

[Gunnar Bittersmann]

Egal welchen der Links ich anklicke, es wird der Wert für ix ausgegeben, der zum Klickzeitpunkt aktuell ist (in dem Fall also immer die 10). Ich hätte aber gerne den Wert, der zum Erzeugungszeitpunkt der Funktion aktuell ist. Wie kann ich den in die function einsetzen?

Andreas,
Da fällt mir nur ein, den zum Erzeugungszeitpunkt zu dem jeweiligen a-Element dazuzuschreiben. Zum Beispiel ein in id-Attribut, da dessen Wert aber keine Zahl sein darf, nehme ich mal das title-Attribut:

for (var ix = 0; ix < 10; ix++)  
{  
  var aLink = document.createElement("a");  
  aLink.href="#link_no_" + ix;  
  aLink.onclick = function() { alert('clicked ' + this.getAttribute("title")); return false; }  
  aLink.appendChild(document.createTextNode("Link Nr. " + ix));  
  aLink.setAttribute("title", ix);  
  parentOfLinks.appendChild(aLink);  
  parentOfLinks.appendChild(document.createTextNode(" "));  
}

Live long and prosper,
Gunnar

[MudGuard]

Hi,

Egal welchen der Links ich anklicke, es wird der Wert für ix ausgegeben, der zum Klickzeitpunkt aktuell ist (in dem Fall also immer die 10). Ich hätte aber gerne den Wert, der zum Erzeugungszeitpunkt der Funktion aktuell ist. Wie kann ich den in die function einsetzen?

Da fällt mir nur ein, den zum Erzeugungszeitpunkt zu dem jeweiligen a-Element dazuzuschreiben. Zum Beispiel ein in id-Attribut, da dessen Wert aber keine Zahl sein darf, nehme ich mal das title-Attribut:

Genau das wollte ich eigentlich vermeiden.
Eigentlich sollen die Werte in die Funktion rein, wo sie hingehören.

cu,
Andreas

[molily]

Hallo,

Da fällt mir nur ein, den zum Erzeugungszeitpunkt zu dem jeweiligen a-Element dazuzuschreiben. Zum Beispiel ein in id-Attribut, da dessen Wert aber keine Zahl sein darf, nehme ich mal das title-Attribut:

Genau das wollte ich eigentlich vermeiden.
Eigentlich sollen die Werte in die Funktion rein, wo sie hingehören.

Warum, was ist so schlimm daran? Ist der Wert keine Information, die zum Elementknoten gehört?
Natürlich muss man es nicht über irgendwelche HTML-Attribute lösen, sondern man hängt einfach eine Eigenschaft an das Elementobjekt an. Sollte auch funktionieren.

aLink.onclick = function () { alert('clicked ' + this.ix); };  
aLink.ix = ix;

Mathias

[MudGuard]

Hi,

Warum, was ist so schlimm daran? Ist der Wert keine Information, die zum Elementknoten gehört?
Natürlich muss man es nicht über irgendwelche HTML-Attribute lösen,

Das war der entscheidende Hinweis.

In den HTML-Attributen wollt ich das Ding nicht drinhaben.

aLink.onclick = function () { alert('clicked ' + this.ix); };

aLink.ix = ix;

  
Das gefällt mir, das verwende ich!  
  
cu,  
Andreas

-- 
[Warum nennt sich Andreas hier MudGuard?](http://www.Mud-Guard.de/)  
[Schreinerei Waechter](http://www.schreinerei-waechter.de/)  
  
Fachfragen per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.  

[Gunnar Bittersmann]

Andreas,
Eine Identifikationsnummer wäre doch eine Eigenschaft (d.h. ein Attribut) eines Links. Was stört dich daran, den a-Elementen solch ein Attribut zu geben, wenn du es sinnvoll zu deren Identifikation verwenden kannst?

Anstelle von title wäre name wohl geeigneter.

Live long and prosper,
Gunnar

[molily]

Hallo,

aLink.onclick = function() { alert('clicked ' + ix); return false; }

> Das ändert auch was, aber leider nicht ganz so wie gewünscht.  
> Egal welchen der Links ich anklicke, es wird der Wert für ix ausgegeben, der zum Klickzeitpunkt aktuell ist (in dem Fall also immer die 10). Ich hätte aber gerne den Wert, der zum Erzeugungszeitpunkt der Funktion aktuell ist. Wie kann ich den in die function einsetzen?  
  
Funktionen sind Objekte, die vom Prototyp Function abgeleitet sind. Das Instantiieren von Objekten funktioniert bekanntlich in erster Linie über das Aufrufen der Konstruktor-Funktion mit dem Schlüsselwort »new« davor.  
  
Auch Function kann als Konstruktor-Funktion aufgerufen werden. Diese nimmt als letzten Parameter den Code des Funktionskörpers als String entgegen, die Parameter davor sind die Funktionsparameter (ebenfalls Namen als Strings). Somit kannst du Funktionen mit variablem Körper schreiben.  
  
`aLink.onclick = new Function("var ix = '" + ix + "'; alert(ix);");`{:.language-javascript}  
  
Beispiel für Entgegennehmen eines Parameters (hier e = Eventobjekt):  
`aLink.onclick = new Function("e", "var ix = '" + ix + "'; alert(ix + e.type);");`{:.language-javascript}  
  
Mathias

[MudGuard]

Hi,

Funktionen sind Objekte, die vom Prototyp Function abgeleitet sind. Das Instantiieren von Objekten funktioniert bekanntlich in erster Linie über das Aufrufen der Konstruktor-Funktion mit dem Schlüsselwort »new« davor.
Auch Function kann als Konstruktor-Funktion aufgerufen werden. Diese nimmt als letzten Parameter den Code des Funktionskörpers als String entgegen, die Parameter davor sind die Funktionsparameter (ebenfalls Namen als Strings). Somit kannst du Funktionen mit variablem Körper schreiben.
aLink.onclick = new Function("var ix = '" + ix + "'; alert(ix);");
aLink.onclick = new Function("e", "var ix = '" + ix + "'; alert(ix + e.type);");

Das hat für mich so einen Touch von "eval" - das gefällt mir nicht so...

(sorry für die späte Rückmeldung, bin gestern um kurz nach Fünf zu ner Grillparty aufgebrochen und grade erst zurückgekommen)

cu,
Andreas