switch case beachtet nur letzten Wert

[dedlfix]

Tach!

var alle_DIVs = document.querySelectorAll('.my_class');

for (var i=0; i<alle_DIVs.length; i++) {
	var my_DIV = alle_DIVs[i];
	var my_DIV_id = alle_DIVs[i].id;
	my_DIV.addEventListener("click", function() {

		switch(my_DIV_id) {
		case "id_1":
		document.write("Erstes Statement");
      break;

		case "id_2":
		document.write("Zweites Statement");
    break;

// CODE

Problem ist, dass bei KLICK allen DIVs die Eigenschaften des letzten DIVs übertragen wurden, heißt, wäre hier id_2 das letzte DIV, spuckt auch id_1 "Zweites Statement" aus... ...warum?

Im Eventhandler sprichst du my_DIV_id an. Das ist aber eine Variable aus dem äußeren Scope. Zum Aufrufzeitpunkt hat diese eine Variable den Wert vom letzten Schleifendurchlauf. Du musst aber deren Inhalt in einem weiteren Scope/Closure pro Eventhandler kapseln, also pro Schleifendurchlauf eine Kopie anlegen.

Beim addEventListener darf nicht nur eine Funktion auf direktem Wege zugewiesen werden. Es sollte stattdessen eine Funktion (beispielsweise als IIFE) aufgerufen werden, die einerseits den aktuellen Wert von my_DIV_id in einer lokalen Variable ablegt, und andererseits den Eventhandler liefert. Somit ist der jeweilige Wert von my_DIV_id konserviert und nicht nur ein einzelner Zustand.

Andererseits liefert so ein Click-Event auch ein Event-Objekt an den Event-Handler. Man muss das nur entgegennehmen und findet darin auch eine Referenz auf das auslösende Elmenent und darüber dann auch dessen ID. Da kann man sich auch die Closure und die Hilfsvariable sparen.

dedlfix.