Slider to JS variable

[Felix Riesterer]

Lieber Alois,

Mein Problem: Ich versuche einen Slider-Wert in ein JS-Variable (strOut[0]) zu bringen, um den Wert dort weiter zu verarbeiten ...

nein, das ist nicht Dein Problem. Diese Deine Worte sind die sprichwörtliche „Story vom Pferd“, denn was Du wirklich zu lösen versuchst, ist in der Tat etwas ganz anderes:

Ich will die Werte mehrerer Slider in einem String zusammen fassen und an den Server schicken.

Also! Dann lass uns doch genau darüber reden, und nicht über Deine konfuse Beschreibung eines Detailproblems, das auf einer falschen Grundannahme beruht.

Du willst einen Button manuell auslösen, um den aktuellen Zustand von allen Deinen Slidern in Form eines Strings zusammenzufassen. Dazu registrierst Du einen EventListener auf genau diesem Button:

<p><button id="update-server">Sliderzustände an Server melden</button></p>
<script>...</script>

In das Script kommt nun folgendes:

document
.getElementById("update-server")
.addEventListener(
  "click",
  event => {
    let myString = [];
    // alle Slider finden
    document
    .querySelectorAll('input[type="range"]')
    .forEach(slider => {
      // String mit Slider-Wert erweitern
      myString.push(slider.name + "=" + slider.value);
    });
    // POSTe alle Teilstrings in `myString` an den Server
  }
);

Die EventListener für Änderungen an den Slidern haben mit Deinem an-den-Server-senden nichts zu tun. Sie zeigen nur den jeweiligen Slider-Wert in einem passenden HTML-Element an, damit man das genauer sehen kann. Konzentrieren wir uns also besser überhaupt nicht darauf, sondern nur auf das Auslesen von allen Slidern auf einen Knopfdruck hin.

Zum besseren Verständnis des Codes:

• variable => { ... } ist eine modernere Schreibweise für function (variable) { ... } (siehe auch Pfeilfunktion)
• Um ein HTML-Element anhand einer bestimmten Eigenschaft (wie z.B. einem Attributwert wie hier das type-Attribut) auszuwählen, verwendet man die document-Methode querySelector. Will man alle Elemente mit dieser Eigenschaft erhalten, verwendet man document.querySelectorAll. Als Parameter übergibt man einen Selektor, wie er auch bei CSS verwendet wird.
• Die forEach-Methode ist nicht nur bei Array-Objekten verfügbar, sondern auch bei dem Objekt, welches von document.querySelectorAll zurückgegeben wird. Damit kann man die gefundenen HTML-Elemente der Reihe nach ansprechen. Dazu will forEach aber eine Funktion als Parameter haben, in der geregelt wird, wie mit dem jeweiligen Element (hier in der Variable slider übergeben) verfahren werden soll.

Liebe Grüße

Felix Riesterer