Slider to JS variable

[Rolf B]

Hallo Alois,

wir erreichen nun das Thema "Scope von Variablen". Der Scope ist der Code-Bereich, wo eine Variable sichtbar ist.

Du hast strOut auf globaler Ebene definiert. Damit ist sie überall sichtbar und Werte, die Du im change- oder input-Handler des Sliders zuweist, sind auch in einem submit-Eventhandler sichtbar.

Aber: Was dein Beispiel zeigt, ist das, was ich schon vorher einmal erklärt habe: Die Eventhandler-Funktion wird von addEventListener lediglich registriert, aber nicht ausgeführt. Dein Code läuft nicht linear von oben nach unten. Die EventListener-Funktion wird erst später aufgerufen, wenn sich der Wert des Sliders ändert. Und dann läuft nur die Funktion und sonst nichts. Deine Ausgabe von strOut[1] am Ende findet statt, bevor die Funktion das erste Mal läuft.

Und Du machst andere Dinge falsch.

Schau erstmal hier: Grundlagen der Ereignisverarbeitung, vor allem das Thema "Bubbling".

1. Du registrierst einen change-Handler auf dem window Objekt. Das hast Du bisher nicht getan, warum jetzt? Das change-Event gelangt natürlich irgendwann per Bubbling dorthin, aber es ist nicht so einfach, ein change- oder input-Event zu verarbeiten, das hochgebubbelt ist. Gerade dann nicht, wenn Du, wie hier, den Wert eines Sliders als Klartext anzeigen willst und Du mehrere Slider hast. Jeder Slider kann change auslösen, und diese change Events würden alle im gleichen Eventhandler landen. Es ist möglich, so vorzugehen, aber nicht so einfach.

2. Du registrierst innerhalb dieses change-Handlers einen input-Handler. Das ist ganz falsch, weil Du dann bei jedem change-Event einen neuen input-Handler hinzufügst.

3. Wenn Du die Slider zusammen mit dem Submit-Button in ein <form> Element packst, dann kannst Du über einen submit-Handler den Submit auf einen XMLHttpRequest umlenken (oder machst es mit jQuery Ajax oder dem fetch-API) und den Form-Inhalt über ein FormData Objekt an den Server posten. Es ist dann überhaupt nicht nötig, sich die Slider-Werte im change- oder input-Event zu merken. Guck Dir hier mal Beispiel 2 an, um zu sehen, wie man aus dem Form-Element das FormData Objekt erzeugt und via XMLHttpRequest verschickt.

Rolf