Slider: Auslesen des Value und Anzeigen einer Punktezahl

Question

Hallo,

ich hätte nochmals eine Frage zu einem Slider-Task:

Ich habe versucht, die Werte aus mehreren Slidern direkt auf der gleichen Seite auszulesen und dann leicht modifiziert (Wert 51, d.h. angezeigter Wert 50 % - auf dem Slider ergibt 5 Punkte) in einem Gesamtpunktescore auf der gleichen Seite anzeigen zu lassen.

Manchmal hat der Code auch bereits funktioniert, manchmal aber leider auch nicht und ich weiß nicht genau, woran es liegen könnte bzw. habe schon sehr viel ausprobiert mit den vielen guten Hinweisen, die ich hier bereits erhalten habe.

Ich habe zunächst die html-Tags in ein Array hinterlegt und dieses jeweils auslesen lassen. Über eine zweite Variable (wert) habe ich hochgezählt, wenn der richtige Wert ausgewählt wurde und die Punktezahl speichern wollen. Diese anschließend mit 5 multipliziert für den finalen Score.

Anbei der Code. Haben Sie eine Idee, was ich noch ausprobieren könnte oder was ich falsch gemacht haben könnte? Anbei auch ein Testlink direkt zu dieser Seite: https://www.soscisurvey.de/test301368/?act=I93GHtQev1Db5GYfXvAQLUbK

<script type="text/javascript">
  <!--
  
  var sliders_id = ["ST04_01", 
                    "ST04_02", 
                    "ST04_03",
                    "ST04_04", 
                    "ST04_05", 
                    "ST04_06", 
                    "ST04_07", 
                    "ST04_08", 
                    "ST04_09", 
                    "ST04_10", 
                    "ST04_11", 
                    "ST04_12", 
                    "ST04_13", 
                    "ST04_14", 
                    "ST04_15", 
                    "ST04_16", 
                    "ST04_17", 
                    "ST04_18", 
                    "ST04_19", 
                    "ST04_20", 
                    "ST04_21", 
                    "ST04_22", 
                    "ST04_23", 
                    "ST04_24", 
                    "ST04_25", 
                    "ST04_26", 
                    "ST04_27", 
                    "ST04_28", 
                    "ST04_29", 
                    "ST04_30", 
                    "ST04_31", 
                    "ST04_32", 
                    "ST04_33", 
                    "ST04_34", 
                    "ST04_35", 
                    "ST04_36", 
                    "ST04_37", 
                    "ST04_38", 
                    "ST04_39", 
                    "ST04_40", 
                    "ST04_41", 
                    "ST04_42", 
                    "ST04_43", 
                    "ST04_44", 
                    "ST04_45", 
                    "ST04_46", 
                    "ST04_47", 
                    "ST04_48"];  // Liste der Slider erstellen
  var sliders = [];
  function getsliders() {
    for (var i=0; i<sliders_id.length; i++) 
    {sliders.push(SoSciSliders.getSlider(sliders_id[i]));}}
  
  var wert = 0;
  
  window.addEventListener("load", function() {
    getsliders();  
    console.log(sliders);
    
    // Event-Handler aktivieren
    for (var i=0; i<sliders.length; i++) {
      sliders[i].addEventListener("change", function() {

        for (var j=0; j<sliders.length; j++) {
          if (sliders[j].getValue() == 51) {
            console.log("51");
            wert = wert+1;
          }
        }  
        console.log(wert);
        document.getElementById("info04").innerHTML = String(wert*5);
        wert = 0;
      });
    }
  });
  
  // -->
    </script>

Answer 1

if (sliders[j].getValue() == 51) {

Spontan fällt mir auf, dass Sie hier auf einen exakten Wert prüfen, während der Schieberegler einen Fließkommawert liefert (z.B. 50.321)

Unabhängig davon, ob der Rest funktioniert, würde ich als erstes mal ein Math.round() empfehlen.

if (Math.round(sliders[j].getValue()) == 51) {

Comments

Ach super, vielen Dank! Das hat sofort funktioniert und in jedem Browser - dann lag es wsl. daran.