ichBinEinAlien: dynamische variable in schleife für create element und select

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];  
}  

  1. 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

    --
    "Sir, we are surrounded!" - "Excellent, we can attack in any direction!"
  2. 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

    --
    Die meisten Menschen werden früher oder später durch Computer ersetzt.
    Für manche würde aber auch schon ein einfacher Taschenrechner genügen.
    Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
    1. [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

      --
      var jQuery = $(hit);
      Wir sind die Schlumpf. Widerschlumpf ist schlumpflos. Wir werden Sie einschlumpfen.
      SelfHTML-Forum-Stylesheet
      1. 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

        --
        Sozial ist, wenn andere bezahlen.
        Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
  3. 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

    --
    Ich spreche Spaghetticode - fließend.
    1. 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
    2. @@misterunknown:

      nuqneH

      … von einem Taubstummen

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

      Qapla'

      --
      „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
  4. 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);  
    }  
    
    
    1. 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.
      
    2. 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

      1. // 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)!