dynamische variable in schleife für create element und select

[ichBinEinAlien]

Hallo,
Ich erzeuge dynamisch links auf einer Seite mittels einer Schleife. Das alleine funktioniert auch recht gut aber leider springen mir meine dynamischen Links nicht in die onclick-Funktion. Woran kann das liegen?

  
function selection(paramSId) {  
 for (var i = 0; i < document.getElementsByTagName('option').length; i++) {  
  if (document.getElementsByTagName('option')[i].value == paramSId) {  
  document.getElementsByTagName('option')[i].setAttribute('selected','selected');  
  }  
 }  
}  
  
var sId = new Array('1003', '7001', '9001');  
for (var i = 0; i < sId.length; i++) {  
 var key = 'dynVar' + i;  
 var val = '=document.createElement("a")';  
 eval(key + val);  
 var ce = eval(key)  
			  
 document.body.appendChild(ce).setAttribute('href', '#')  
 document.body.appendChild(ce).onclick = function() {  
  selection(sId[i]);  
  document.getElementsByName('filter')[0].click();  
  };  
 document.body.appendChild(ce).innerHTML = sId[i];  
}  

[henf]

servus ichBinEinAlien,

var key = 'dynVar' + i;
var val = '=document.createElement("a")';
eval(key + val);
var ce = eval(key)

Warum benutzt du so ein wirres Konstrukt statt eines Arrays? Bzw... im Prinzip brauchst du nur eine einzige Variable, warum machst du das so?
Außerdem: eval is evil

document.body.appendChild(ce).setAttribute('href', '#')
document.body.appendChild(ce).onclick = function() {
  selection(sId[i]);
  document.getElementsByName('filter')[0].click();
  };
document.body.appendChild(ce).innerHTML = sId[i];

Weißt du, was http://de.selfhtml.org/javascript/objekte/node.htm#append_child@title=appendChild macht?

Versuchs mal so:

for(var i = 0; i < sId.length; i++){  
 var link = document.createElement('a');  
 link.href = '#';  
 link.innerHTML = sId[i];  
 link.onclick = function(){  
   // etc  
 }  
 document.body.appendChild(link);  
}  

henf

[Der Martin]

Hallo,

du hast in deinem Codeauszug mehrere Stellen, die ungünstig und fragwürdig realisiert sind.

for (var i = 0; i < document.getElementsByTagName('option').length; i++)

Hier lässt du die JS-Engine in jedem Schleifendurchlauf erneut das ganze DOM nach option-Elementen absuchen, nur um deren Anzahl zu bekomen. Da die Anzahl aber eigentlich konstant bleibt, ist es schlauer, sie einmal _vor_ der Schleife zu ermitteln, zu speichern und dann im Schleifenkopf den gespeicherten Wert abzufragen.

if (document.getElementsByTagName('option')[i].value == paramSId) {
  document.getElementsByTagName('option')[i].setAttribute('selected','selected');
  }

Warum gehst du den umständlichen Weg über setAttribute(), anstatt die Eigenschaft direkt zu setzen?

document.getElementsByTagName('option')[i].selected = 'selected';

for (var i = 0; i < sId.length; i++) {
var key = 'dynVar' + i;
var val = '=document.createElement("a")';
eval(key + val);
var ce = eval(key)

Die Verwendung von eval() ist meistens keine gute Idee - ehrlich gesagt, ist dir die Verschleierung dessen, was da wirklich passieren soll, gut gelungen. Ich blick's nicht.

document.body.appendChild(ce).setAttribute('href', '#')
document.body.appendChild(ce).onclick = function() {
  selection(sId[i]);
  document.getElementsByName('filter')[0].click();
  };
document.body.appendChild(ce).innerHTML = sId[i];
}

Das sieht falsch aus. Der zweite Aufruf von appendChild() dürfte fehlschlagen, und damit auch die Zuweisung der Eventhandler-Funktion.

So long,
 Martin

[Kai345]

[latex]Mae  govannen![/latex]

Warum gehst du den umständlichen Weg über setAttribute(), anstatt die Eigenschaft direkt zu setzen?

document.getElementsByTagName('option')[i].selected = 'selected';

Nein.
<referenz>.selected = true;

Stur lächeln und winken, Männer!
Kai

[Der Martin]

Hallo,

document.getElementsByTagName('option')[i].selected = 'selected';
Nein.
<referenz>.selected = true;

wo er Recht hat, hat er Recht. Danke für den Hinweis.

Ciao,
 Martin

[misterunknown]

Moin,

for (var i = 0; i < sId.length; i++) {
var key = 'dynVar' + i;
var val = '=document.createElement("a")';
eval(key + val);
var ce = eval(key)
document.body.appendChild(ce).setAttribute('href', '#')
document.body.appendChild(ce).onclick = function() {
  selection(sId[i]);
  document.getElementsByName('filter')[0].click();
  };
document.body.appendChild(ce).innerHTML = sId[i];
}
[/code]

Das ist eine sehr kreative Möglichkeit. Es ähnelt dem Versuch einen Baum mit einer Axt, die an einer Angel befestigt ist, die von einem Taubstummen, dem du verzweifelt Anweisungen zurufst, gehalten wird, zu fällen.

Du brauchst weder dynVarX noch eval. Die ersten 3 Zeilen innerhalb der Schleife kannst du getrost weglassen:

var ce = document.createElement("a");  

reicht völlig. appendChild() hängt ein fertiges Element an. Wenn du Eigentschaften vergeben willst, musst du das noch mit ce machen:

ce.href = "#";  

Grüße Marco

[Steffen]

Tag,

Das ist eine sehr kreative Möglichkeit. Es ähnelt dem Versuch einen Baum mit einer Axt, die an einer Angel befestigt ist, die von einem Taubstummen, dem du verzweifelt Anweisungen zurufst, gehalten wird, zu fällen.

das gefällt mir; danke! :-)

• Steffen

[Gunnar Bittersmann]

@@misterunknown:

nuqneH

… von einem Taubstummen

„Gehörlose sind nicht stumm.“ (Julia Probst)

Qapla'

[ichBinEinAlien]

Hallo nochmal,
erst einmal Danke an euch!
Ich hab es jetzt folgenden Code. Das Problem besteht allerdings noch immer. Selectiert wird beim Klick auf den neu erzeugten Link nichts:

  
function selection(paramSId) {  
 var optionLength = document.getElementsByTagName('option').length;  
 for (var i = 0; i < optionLength; i++) {  
  if (document.getElementsByTagName('option')[i].value == paramSId) {  
   document.getElementsByTagName('option')[i].selected = 'selected';  
  }  
 }  
}  
  
var sId = new Array('1003', '7001', '9001');  
  
for (var i = 0; i < sId.length; i++) {  
 var link = document.createElement('a');  
 link.href = '#';  
 link.innerHTML = sId[i];  
 link.onclick = function() {  
  selection(sId[i]);  
  document.getElementsByName('filter')[0].click();  
 }  
 document.body.appendChild(link);  
}  

[gast_42]

Vermutlich würde die Fehlerkonsole dir sagen, dass bei diesem Aufruf

selection(sId[i]);

  
das i nicht dem entspricht, was du glaubst. Bis dahin hat der Browser nämlich vergessen, welches i du meintest, als die Funktion dem onclick-Handler zugewiesen wurde.

[JürgenB]

Hallo ichBinEinAlien,

»» for (var i = 0; i < sId.length; i++) {  

>  var link = document.createElement('a');  
>  link.href = '#';  
>  link.innerHTML = sId[i];  
  
// Du musst dir das i merken  
link.Nummer = i;  // Alternativ kann man daws auch über Closures regeln  
  

>  link.onclick = function() {  
>   selection(sId[i]);  
  
selection(sId[this.Nummer]); // this zeigt hier auf das das Eventauslösende Element, also auf link  

>   document.getElementsByName('filter')[0].click();  
  
prüf mal, ob hier nicht ein .onclick() hin muss.  
  

>  }  
>  document.body.appendChild(link);  
> }  
> 

Übrigens, wenn du nur etwas zum Draufklicken benötigst, kannst du auch einen <button type="button> nehmen.

Gruß, Jürgen

[ichBinEinAlien]

// Du musst dir das i merken
link.Nummer = i;  // Alternativ kann man daws auch über Closures regeln
[...]
selection(sId[this.Nummer]); // this zeigt hier auf das das Eventauslösende Element, also auf link

Super. So hat's geklappt.
Danke euch (allen)!