[GELOEST] slider change function für mehrere input slider...

[chromo23]

Hallo,
ich bastele immer noch an meiner dynamisch generierten Seite für eine microcontroller firmware.
Hintergrund: https://www.html.de/threads/uebersicht-aus-json-generieren.60684/#post-407689
Dort hatte mir ja @Sempervivum schon sehr geholfen.

Nun habe ich diese Seite um Buttons und Slider erweitert. Wenn ein Gerät die phrase "slider" beinhaltet, dann wird ein ein Slider generiert:

 else if ((sensor.TaskName).toLowerCase().includes("slider")) {  //if a task contains "slider" it generates an input slider
  html2 += '<div class="sensorset">' + '<input type="range" min="0" max="1023" value="' + sliderValue + '" id="slider1" class="slider" onchange="updateSlider(this.value,\'' + utton + '\')" oninput="isitTime()">' + '<div  class="sensors" style="align-items: flex-end;"">' + '<div style="font-weight:bold;font-size: 14pt;">' + sensor.TaskName + '</div>' + '<div id="sliderAmount" style="text-align: right;">' + sliderValue + '</div>' + '</div>';
 }

Mit "onchange" wird eine Funktion gestartet, die die Daten dem Microcontroller übergibt (das funktioniert sehr gut):

<script>
    function isitTime() { //oninput of slider calls this function to prevent refereshing the page while sliding
        window.isittime = 0;
    }

    function updateSlider(slideAmount, utton) {
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4) {
            }
        }
        xhr.open('get', 'control?cmd=event,' + utton + 'event=' + slideAmount, true); //generating the event+values vor all the slider
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
        xhr.send();
        window.isittime = 1;
    }
</script>

Um die Werte direkt beim Sliden zu sehen benutze ich folgenden Script:
Wenn ich nur einen Slider habe funktioniert der Script auch sehr gut

<script>
    function sliderStart() {
        var slider = document.getElementById('slider1');
        slider.addEventListener('input', sliderChange);
    }
    function sliderChange() {

        var sliderDiv = document.getElementById("sliderAmount");
        sliderDiv.innerHTML = this.value;
        console.log(this.value);
    }
</script>

Habe ich mehrere slider geht das so natürlich nicht mehr.
Ich habe versucht nach dieser Anleitung vor zu gehen: https://stackoverflow.com/questions/48134220/javascript-updating-multiple-slider-innerhtml/48137573
Bin aber kläglich gescheitert.
Ich würde mich freuen wenn jemand mir helfen könnte.

​

Im Anhang der ganze Code als Kontext

 

[chromo23]

Danke für deine Antwort, aber ich glaube du hast mich missverstanden .
Die Funktion updateSlider funktioniert wie sie soll für alle Slider (die werden ja je nach gerät dynamisch hinzugefügt). Und auch die Funktion sliderChange funktioniert wie sie soll für einen Slider. Wie auf dem Gif zu sehen.
Ist deine Lösung nicht nur eine andere Vorgehensweise für das was ohnehin schon funktioniert? (Sorry, wenn das ne doofe Frage ist aber ich steh bei Javascript echt aufm Schlauch)

Hier wird ja ne Variable (utton) übergeben, die für jeden Slider, der generiert wird, eindeutig ist

onchange="updateSlider(this.value,\'' + utton + '\')"

Hier wird sie übergeben:

   function updateSlider(slideAmount, utton) {

Ich hatte auch schon anhand dieser Funktion die Werte für alle Slider erfolgreich ausgeben.
Das Problem bei onchange ist halt nur onchange und nicht während ich den slider bewege (nur wenn ich ihn loslasse)

Desahlb habe ich das hiermit zu lösen versucht:

    slider.addEventListener('input', sliderChange);

Aber dass muss ich nur noch variabel gestalten, da ja die Anzahl der Slider variieren
Der Link im ersten Post ist glaub ich ein guter Ansatz bei dem ich nur noch nicht durchblicke.

 

[chromo23]

Dein Beispiel funktioniert sehr gut aber leider ist diese Lösung keine Option, da wie ja schon geschrieben, Werte nur nach loslassen des Sliders aktualisiert werden. ("onchange" eben)
Was ich meine siehst du im ersten Post im Gif. Dort verändert der obere Slider seine Werte kontinuierlich.
Die updateSlider Funktion nutze ich zwar auch aber nur, dass nach "loslassen" des Sliders die Werte an den Microcontroller übergeben werden. (Der wäre überfordert mit der kontinuierlichen Fütterung von Daten)

Hier kannst du schauen wie ich das meine: https://jsfiddle.net/0fzxpsdt/1/
Der erste Slider wird im diesen Beispiel angesprochen.
Ich denke ich muss dafür multiple Eventlistner aufrufen.

 

[chromo23]

stimmt.. ich fang mal an zu experimentieren...

 

[chromo23]

Funktioniert! aber nur bedingt.
da sliderChange ja den Eventlistener erst aufruft, wenn der Slider schon Aktiv ist. Beim kontinuierlichen Sliden fällt das fast nicht auf. Aber wenn ich irgendwo in den Sliderbereich klicke, dann sieht das erste Ergebnis verständlicherweise so aus:

 

[chromo23]

Soweit bin ich schon gekommen. Ich generiere ein Array aus allen Slidern und generiere daraus Eventlistener:

var sliderList = document.getElementsByTagName('input');
var sliderArray = [].map.call(sliderList, function(el) {
  return el.id;
});
call_me(sliderArray);

function call_me(params) {
  for (i=0; i<params.length; i++) {
   var slider = document.getElementById(params[i]);
slider.addEventListener('input', sliderChange);

  }
}
function sliderChange() {

  var sliderDiv = document.getElementById("sliderAmount");
  sliderDiv.innerHTML = this.value;
  console.log(this.value);
}

Ich weiß nur noch nicht so recht wie ich das dann an sliderChange übergebe.....

 

[chromo23]

Das hast Du ja sehr kompliziert gemacht: Erst ein Array mit IDs ermitteln und dann wieder aus der ID das Element. Außerdem kann sliderChange so nicht funktionieren denn mit diesem:

Willst du es mal richtig kompliziert sehen:

   <div class="sensorset"><input type="range" min="0" max="1023" value="456" id="slider" class="slider"
            onchange="updateSlider(this.value,'slider')" oninput="isitTime('slider','sliderAmount');sliderChange()">
        <div class="sensors" style="align-items: flex-end;">
            <div style="font-weight:bold;font-size: 14pt;">slider</div>
            <div id="sliderAmount" style="text-align: right;">456</div>
        </div>
    </div>

    <script>
 
  var sAm
    function paramS() {
        var sliderList = document.getElementsByTagName('input');
var sliderArray = [].map.call(sliderList, function(el) {
  return el.id;
});
call_me(sliderArray);

        function call_me(params) {
            for (i = 0; i < params.length; i++) {
                var slider = document.getElementById(params[i]);
                slider.addEventListener('input', sliderChange);
            }
        }
    }
    function isitTime(utton, sliderAmount) { //oninput of slider calls this function to prevent refereshing the page while sliding
        window.isittime = 0;
        sAm = sliderAmount;
      
    }
    function sliderChange() {
        var sliderDiv = document.getElementById(sAm);
        sliderDiv.innerHTML = this.value;
        console.log(sliderAmount);
    }  
function updateSlider(sliderAmount, utton) {
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4) {
            }
        }
        xhr.open('get', 'control?cmd=event,' + utton + 'event=' + sliderAmount, true); //generating the event+values vor all the slider
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
        xhr.send();
        window.isittime = 1;
    }
    </script>

Die Funktion paramS() wird am nach dem Erstellen aller Elemente ausgeführt. Es funktioniert alles wie es soll. Aber ich schau mir auf jeden Fall deinen Vorschlag nochmal genauer an. Der sieht wesentlich eleganter aus!!!

 

[chromo23]

Also auf jeden Fall super! Sieht besser aus und funktioniert. Danke vielmals!!!
Eine letzte Frage diesbezüglich.
Warum funktioniert folgendes nicht? Ich wollte den Inhalt von "slider" gerne weitergeben. Klappt aber nicht.

function sliderChange(event) {
        // Den Slider, der das Event ausgelöst hat,
        // finden wir unter event.target:
        slider = event.target;
        sliderAmount = event.target.value;
        .
        .
        .
        xhr.open('get', 'control?cmd=event,' + slider + 'event=' + sliderAmount, true); //generating the event+values vor all the slider
.
.
.

Output:

 HTTP: event,[object HTMLInputElement]event=711

sliderAmount funktioniert
slider nicht

Edit: slider.id
Edit2: Also nochmal... Danke, danke, danke!!!

 

[chromo23]

slider ist ein HTML-Element und kein String, slider ist dagegen ein String. In einer URL kannst Du nur Strings einsetzen. Setzt Du ein HTML-Element ein, macht Javascript eine automatische Umwandlung in eine Stringdarstellung wobei dann "[object HTMLInputElement]" heraus kommt.

(Sorry, wenn das ne doofe Frage ist aber ich steh bei Javascript echt aufm Schlauch)

Ich hoffe du hast die Edits im Letzen Post gelesen..