Anzeige

JavaScript | addEventListener mit Array

JavaScript | addEventListener mit Array | PSD-Tutorials.de

Erstellt von aae_sandro, 02.09.2013.

  1. aae_sandro

    aae_sandro Noch nicht viel geschrieben

    Dabei seit:
    17.04.2009
    Beiträge:
    4
    Geschlecht:
    männlich
    JavaScript | addEventListener mit Array
    Hi,

    ich habe vor kurzem angefangen mir JavaScript beizubringen, bin also noch ein kleiner Noob :rolleyes: Ich habe versucht mir etwas zusammenzucoden, allerdings komme ich gerade nicht weiter...

    Ich habe auf einer Seite meherere Divs mit der Klasse content_pers. Wenn ich auf einen dieser Divs klicke, soll ein alert() mit dem entsprechend dahinter abgelegten Namen einer Person angezeigt werden. Standardmäßig wird das mit dem Namen XXX initialisiert.

    Der Code schaut folgendermaßen aus:

    Code (Text):
    1.  
    2. var vornamen = new Array();
    3. vornamen[0] = "XXX";
    4. vornamen[1] = "YYY";
    5.        
    6. var vorname = vornamen[0];
    7.        
    8. function initDomLoader() {
    9.     var elements = document.getElementsByClassName("content_pers");
    10.            
    11.     for (var j = 0; j < elements.length; j++) {
    12.         elements[j].addEventListener("click", function() {
    13.             vorname = vornamen[j];
    14.             alert(vorname);
    15.         }, false);
    16.     };
    17. }
    18.  
    InitDomLoader wird aufgerufen via
    Code (Text):
    1. window.onload = initDomLoader;
    Allerdings wird mir jetzt bei click auf die Divs immer "undefined" angezeigt. Die Variable ist also nichtmehr vorhanden, wenn ich auf den div klicke... Leider weiß ich nicht, wie ich das Problem beheben soll...

    Wäre super, wenn mir jemand helfen könnte :)

    MfG
     
    #1      
  2. Duddle

    Duddle Posting-Frequenz: 14µHz

    Dabei seit:
    03.02.2006
    Beiträge:
    3.864
    Geschlecht:
    männlich
    Ort:
    Dresden
    JavaScript | addEventListener mit Array
    AW: JavaScript | addEventListener mit Array

    Das ist ein recht fieses Problem für einen Anfänger.
    Ich weiß nicht genau, was du schon verstehst, deshalb nochmal eine kurze Auffrischung bezüglich Variablen: Variablen können entweder by reference oder by value an eine Funktion übergeben werden. Referenzen sind nur Zeiger auf andere Variablen, Werte sind Kopien dieser Variablen.

    In deinem Fall wird j als Referenz an die anonyme Funktion in addEventListener() übergeben. Das heißt, wenn später j geändert wird, dann gilt innerhalb der anonymen Funktion dieser neue Wert. Am Ende der Schleife ist j 5, aber vornamen[5] gibt es nicht / ist "undefined".

    Die Lösung ist, j als Wert-Übergabe zu erzwingen. Dafür gibt es mehrere Wege, ich zeige mal einen:
    Code (Text):
    1.  
    2. for (var j = 0; j < elements.length; j++) {
    3.     (function(localJ) {
    4.     elements[localJ].addEventListener("click", function(e) {
    5.         vorname = vornamen[localJ];
    6.         alert(vorname);
    7.     }, false);
    8.      })(j);
    9. };
    10.  
    Hier wird der Schleifenkörper in eine neue, anonyme Funktion gesteckt. Diese Funktion wird mit j aufgerufen. Da Funktions-Parameter in JS standardmässig per Wert übergeben werden, ist localJ dann eine lokale Kopie von j und kann an den Event-Listener übergeben werden.
    Die Syntax ist vielleicht etwas seltsam, deshalb nochmal genauer:
    Code (Text):
    1.  
    2. function foo() { };
    3.  
    definiert eine Funktion foo. Dann ist foo der Zeiger auf diese Funktion und kann mit foo() aufgerufen werden.
    Eine anonyme Funktion wird definiert mit
    Code (Text):
    1.  
    2. function() { };
    3.  
    Aber da (ohne zusätzliche Variable) sie dann keinen benannten Zeiger hat, wir zum Aufruf nicht einfach () anhängen können, muss dem Code explizit gesagt werden, dass es sich um eine Funktion handelt. Dazu wird sie in () eingewickelt und kann dann wie folgt aufgerufen werden:
    Code (Text):
    1.  
    2. (function() { })();
    3.  

    Duddle
     
    #2      
  3. ovbb

    ovbb es gibt für alles eine weg

    Dabei seit:
    07.02.2007
    Beiträge:
    210
    Geschlecht:
    männlich
    Ort:
    Wien
    Software:
    DW, FL, PS, ID, AI, Editor, Bash, VisualStudio :-)
    Kameratyp:
    D90
    JavaScript | addEventListener mit Array
    AW: JavaScript | addEventListener mit Array

    Außerdem würd ich eine foreach über die css-klasse laufen lassen

    HTML:
    1.  
    2. $(document).ready(function (e) {
    3.     $(".content_pers").each(function () {
    4.        //TODO
    5.    });
    6. });
    7.  
     
    #3      
  4. aae_sandro

    aae_sandro Noch nicht viel geschrieben

    Dabei seit:
    17.04.2009
    Beiträge:
    4
    Geschlecht:
    männlich
    JavaScript | addEventListener mit Array
    AW: JavaScript | addEventListener mit Array

    Wow, danke für die Antworten, hat mir sehr geholfen! Das mit der Referenzübergabe habe ich noch nicht gewusst, danke!
    Jetzt funktioniert es auch wie es sollte! :daumenhoch:

    MfG
     
    #4      
x
×
×