Antworten auf deine Fragen:
Neues Thema erstellen

Antworten zum Thema „JavaScript | addEventListener mit Array“

A

aae_sandro

Guest

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

Posting-Frequenz: 14µHz

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:
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:
Code:
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
Code:
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:
Code:
(function() { })();


Duddle
 

ovbb

es gibt für alles eine weg

AW: JavaScript | addEventListener mit Array

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

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

aae_sandro

Guest

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
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
175.157
Beiträge
2.581.867
Mitglieder
67.223
Neuestes Mitglied
Desiree
Oben