Richy: JS Variable bei onclick

Hi. Ich würde gerne über die onclick Funktion divs mit dynamischen Inhalt erstellen.

Ich hab das Array text das mit wörter gefüllt wird. Über eine for Schleife (i = 0; i < anzahl_wörter; i++) werden auf der bestehenden Website mit innerhtml die divs erstellt und als inhalt wird text[i] angezeigt.

Das funktioniert soweit noch. Jetzt würd ich diese divs gern mit einer onclick funktion versehen. Und zwar soll wenn ich drauf klicke ein neues Div mit einem bestimmten inhalt aufgehen.
Ungefähr so:
<a onclick="opendiv()">
function opendiv(){
document.getElementById('div_wo_neue_divs_entstehen').innerHTML += "<div class='dynamic_div'>" + text[i] + "</div>";
}
Jetzt hab ich das Problem dass i nach der for Schleife auf z.b 5 ist.
Und wie ich das sehe wird i erst beim Ausführen der onclick Funktion durch einen Wert ersetzt... das bedeutet dass es egal ist auf welchen div ich klicke da ich immer als inhalt des neuen divs text[5] bekomme wenn i nach der for Schleife auf 5 ist.
Wie muss ich die Funktion aufbauen damit i beim Ausführen von opendiv() den Wert hat den er zu dem Zeitpunkt in der for Schleife hatte?
Ich hoffe ich hab das Ganze halbwegs verständlich formuliert.
Danke schon mal.
MfG Richy

  1. Hi,

    das ist ein häufiges Problem, wenn man Closures innerhalb von Schleifen verwendet.

    Lies dir das mal durch.

    Im Prinzip musst du noch eine zweite Funktion schreiben der du das i übergibst. Diese Funktion gibt eine Funktion zurück, die das i dann tatsächlich verwendet.

    Gruß!

    1. Hi,

      das ist ein häufiges Problem, wenn man Closures innerhalb von Schleifen verwendet.

      Lies dir das mal durch.

      Im Prinzip musst du noch eine zweite Funktion schreiben der du das i übergibst. Diese Funktion gibt eine Funktion zurück, die das i dann tatsächlich verwendet.

      Gruß!

      Hi danke für deine schnelle Antwort. Ich wusste leider nicht dass das einen unterschied machen würde aber ich füge die divs mit der onclick Funktion mittels innerHTML += ... hinzu. Das heißt eigentlich müsste ich das so machen:
      _div.innerHTML += "<div style='border:1px solid;'><a onclick = function(value) {return function() {alert(value);}}>" + variabler_text + "</a></div>";
      Leider funktioniert es so nicht und ich geh mal davon aus dass es daran liegt dass die innere Funktion beim einfügen des divs nicht ausgeführt wird.
      Was muss ich da ändern damit das funktioniert?
      Danke MfG Richy

      1. Hi,

        Hi danke für deine schnelle Antwort. Ich wusste leider nicht dass das einen unterschied machen würde aber ich füge die divs mit der onclick Funktion mittels innerHTML += ... hinzu. Das heißt eigentlich müsste ich das so machen:
        _div.innerHTML += "<div style='border:1px solid;'><a onclick = function(value) {return function() {alert(value);}}>" + variabler_text + "</a></div>";

        Es wäre gut, wenn du deinen gesamt Code hier mal posten würdest. Es ist etwas unklar, welches Div in welchem anderen Div erzeugt wird, und dann wird beim onclick dieser noch mal ein Div in wieder einem anderen Div erzeugt, dass aber Werte aus dem ersten Div benutzt...!?

        Das ist etwas verwirrend.

        Ich würde halt grundsätzlich nicht mit innerHTML arbeiten (außer bei einfachen Sachen), da man eben mit Objekten besser arbeiten kann. Wie z.B. beim EventHandling.

        Bin mir nicht sicher, aber habe glaube ich mal gehört, dass Events bei innerHTML z.B. nicht funktionieren.

        for (var i = 0; i < 5; i++)  
        {  
        var myDiv = document.createElement("div");  
        div.style.border = "1px solid";  
        div.onclick = function(value)  
        {  
        return function()  
        {  
        alert(value);  
        }  
        }(i);  
        _div.appendChild(div);  
        }
        

        Das a-Element brauchst du auch nicht um ein click Event abzufangen.

        Gruß!

        1. Hi.

          Das ist etwas verwirrend.

          Ja stimmt hätte es etwas übersichtlicher erklähren können :)

          Ich würde halt grundsätzlich nicht mit innerHTML arbeiten (außer bei einfachen Sachen), da man eben mit Objekten besser arbeiten kann. Wie z.B. beim EventHandling.

          Bin mir nicht sicher, aber habe glaube ich mal gehört, dass Events bei innerHTML z.B. nicht funktionieren.

          Das würde erklähren warum es nicht funktioniert hat.

          Und ich glaub ich bin mit Objekten wirklich besser dran :)
          Danke
          MfG Richy

        2. Hi,

          Bin mir nicht sicher, aber habe glaube ich mal gehört, dass Events bei innerHTML z.B. nicht funktionieren.

          Jein, nicht per se.

          Aber per Script hinzugefügte Eventhandler gehen verloren, wenn du das innerHTML eines Vorfahrenelementes erweiterst oder auch mit gleichem Inhalt neu setzt - weil dabei die Elemente jeweils komplett neu erzeugt werden.

          <div id="testdiv"><a id="testlink" ...>blubb</a></div>

          document.getElementById("testlink").onclick = doSomething;

          • damit hätten wir dem A-Element einen Eventhandler verpasst, der bei Klick auf das Element die Funktion doSomething aufruft.

          Wenn du jetzt anschliessend irgendwie schreibend auf innerHTML von #testdiv zugreifst - bspw.
          document.getElementById("testdiv").innerHTML += "<strong>Oops!</strong>";
          dann geht der Eventhandler verloren, weil ein komplett neues A-Element erzeugt wird. Das sichtbare Ergebnis mag das gleiche bleiben - aber es ist nicht mehr das A-Element von vorher.

          MfG ChrisB

          --
          Light travels faster than sound - that's why most people appear bright until you hear them speak.
      2. Hi,

        Das heißt eigentlich müsste ich das so machen:
        _div.innerHTML += "<div style='border:1px solid;'><a onclick = function(value) {return function() {alert(value);}}>" + variabler_text + "</a></div>";

        Wenn schon, müsstest du es erst mal syntaktisch korrekt machen.

        Leider funktioniert es so nicht

        Welchen Inhalt soll das onclick-Attribut des A-Elements haben?

        MfG ChrisB

        --
        Light travels faster than sound - that's why most people appear bright until you hear them speak.
  2. Hallo,

    Ich hab das Array text das mit wörter gefüllt wird. Über eine for Schleife (i = 0; i < anzahl_wörter; i++) werden auf der bestehenden Website mit innerhtml die divs erstellt und als inhalt wird text[i] angezeigt.

    Jetzt würd ich diese divs gern mit einer onclick funktion versehen. Und zwar soll wenn ich drauf klicke ein neues Div mit einem bestimmten inhalt aufgehen.

    Dann weise doch den oncklick-Handler sofort zu, noch in der Schleife, die die divs mit den Wörtern einsetzt (d.h. während dein i noch den richtigen Wert hat), und übergib es der Handler-Funktion.

    Gruß, Don P