Antwort an „Nico R.“ verfassen

EventListener schachteln für click/keyup-Behandlung

Nico R. 26.03.2025 20:00

javascript

Hallo Rolf,

nee, das ist das Redaktionssystem. Schwer zu erklären. Innerhalb dieser anonymen Funktion passiert noch viel mehr. Es gibt dort auch wiederum Funktionsdeklarationen usw.

Ich denke/dachte mir, dass es relativ egal ist, ob ich eine Funktion mit function funktionsname() { } deklariere und dann mit addEventlistener("click", funktionsname) aufrufe oder ob ich direkt die anonyme Funktion als Kapselung nutze. Bisher kam ich damit gut zurecht, das hab ich mir irgendwie so angewöhnt.

Im Zuge dieses Konstrukts bin ich aber gerade auf ein neues Problem gestoßen, hier im neuen Beispielscript zu sehen. Sagen wir mal, es gibt jetzt innerhalb der anonymen Funktion eine globale Variable val, die aus einem input-Feld außerhalb des dialogs kommt. Beim ersten Absenden (Nummer eingeben => dialog öffnen => OK) wird val korrekt ausgegeben, bei allen folgenden ändert es aber den Wert nicht mehr:

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="utf-8">
</head>
<body>
	
  <input type="number" min="1" max="10">
  <button id="button">Dialog öffnen</button>

  <dialog id="dialog">
    <button id="dialog_ok" type="button">OK</button>
    <button id="dialog_abbr" type="reset">Abbrechen</button>
  </dialog>
	
  
  <script>
  (function () {
	const button = document.getElementById("button");
	const dialog = document.getElementById("dialog"); 
	const dialog_ok = document.getElementById("dialog_ok");
	const dialog_abbr = document.getElementById("dialog_abbr");	

	var erstaufruf = true;

	button.addEventListener("click", function(event){

		const val = document.querySelector("input").value;
	
		dialog.showModal();	
		
		if(erstaufruf) {
			dialog_ok.addEventListener("click", function(event) {
				console.log("dialog klick OK");	
				absenden();
				dialog.close();
			});		
		}
		
		if(erstaufruf) {
			dialog.addEventListener("keydown", function(event) {	
				console.log("dialog keydown");
				if(event.keyCode == 13) {
					console.log("dialog keydown OK");
					event.preventDefault();
					absenden();
					dialog.close();
				}
			});	
		}
	
		erstaufruf = false;
		
		console.log("Testausgabe val vor absenden(): "+val);
		function absenden() {
			console.log("Senden: "+val);
		}
		
	});		

  })(); 	
  
  </script>
</body>
</html>

Die Funktion absenden() ist auch innerhalb der anonymen Funktion definiert und soll eigentlich immer auf den aktuellen val zugreifen. Sie nutzt aber immer das val vom ersten absenden. Die Testausgabe direkt vor function ausgabe() liefert den korrekten, aktuellen val, nur die Funktion selbst dann nicht mehr.

Schuld ist die Schalterzeile if(erstaufruf) { Ich verstehe nur noch nicht ganz, warum sie function absenden() beeinflusst. Es wird anscheinend immer der Aufruf absenden() vom ersten Aufruf verwendet. Ist das logisch, ja? Muss ja...

Es wird wohl Zeit, Feierabend zu machen...

Schöne Grüße

Nico