JavaScript | addEventListener mit Array

[aae_sandro]

Hi,

ich habe vor kurzem angefangen mir JavaScript beizubringen, bin also noch ein kleiner Noob 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:

var vornamen = new Array();
vornamen[0] = "XXX";
vornamen[1] = "YYY";
        
var vorname = vornamen[0];
        
function initDomLoader() {
    var elements = document.getElementsByClassName("content_pers");
            
    for (var j = 0; j < elements.length; j++) {
        elements[j].addEventListener("click", function() {
            vorname = vornamen[j];
            alert(vorname);
        }, false);
    };
}

InitDomLoader wird aufgerufen via

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

 

[Duddle]

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:

for (var j = 0; j < elements.length; j++) {
    (function(localJ) {
	elements[localJ].addEventListener("click", function(e) {
	    vorname = vornamen[localJ];
	    alert(vorname);
	}, false);
     })(j);
};

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:

function foo() { };

definiert eine Funktion foo. Dann ist foo der Zeiger auf diese Funktion und kann mit foo() aufgerufen werden.
Eine anonyme Funktion wird definiert mit

function() { };

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:

(function() { })();

Duddle

 

[ovbb]

AW: JavaScript | addEventListener mit Array

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

$(document).ready(function (e) {
    $(".content_pers").each(function () {
       //TODO
   });
});

 

[aae_sandro]

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! :

MfG