Manipulierte Anzeige des Slider-Wertes in einer Tabelle auf der selben Seite

Question

Sehr geehrte Community,

ich sitze seit einer Weile am folgenden Skript, dass den Wert des Sliders innerhalb einer Tabelle darstellen soll, um so den TeilnehmerInnen zu zeigen, wie viel Geld sie von A nach B transferrieren.

Leider bin ich aus den vorherigen Posts (e.g. https://support.soscisurvey.de/?qa=3217/javascript-zur-live-auswertung-schiebereglers-teilnehmer) nicht schlauer geworden.

Auch in meinem Skript ist der Slider immer "undefinded". Ich hoffe jemand weiß mittlerweile die Lösung.

Vielen Dank für eure Hilfe,

Marco

   <!--Tabelle zur Anzeige-->
                
                 <table style="width:100%" frame="hsides" rules="rows">
                  <tr>
                    <th>SpielerIn</th>
                    <th>Vor Ihrer Umverteilung</th>
                    <th>Nach Ihrer Umverteilung</th>
                  </tr>
                  <tr>
                    <td>A</td>
                    <td>10 €</td>
                    <td><p id="valueA"></p> €</td>
                  </tr>
                  <tr>
                    <td>B</td>
                    <td>0 €</td>
                    <td><p id="valueB"></p> €</td>
                  </tr>
                </table>
        
 <!--Javaskript um den Slider auszulesen-->
                
 <script type="text/javascript">
                
 var slider=SoSciSliders.getSlider("UV01_01");
                
  function updateSlider() {
                  var rohwert = slider.getValue();
                  var wertA= 10-10*(rohwert-1);
                  var wertB= 10*(rohwert-1);
                  var wertA = Math.round((10-0.1*(rohwert-1))*100)/100;
                  var wertB = Math.round((0.1*(rohwert-1))*100)/100;
          document.getElementById("valueA").innerHTML= wertA;
          document.getElementById("valueB").innerHTML= wertB;
           }
                
          slider.addEventListener("click", updateSlider);
                
        </script>

Comments

Könnten Sie bitte einmal einem Pretest-Link direkt (!) zur betroffenen Seite posten? Dann können wir un das gerne ansehen. JavaScript Fehler sind im Kontext meist deutlich besser zu finden. Womöglich haben Sie den HTML/JavaScript-Code einfach nur über statt unter der Schieberegler-Frage eingebunden...

---

Guten Morgen,

vielen Dank für diese erste Diagnose, aber der Code ist unter der Slider-Frage. Hier ist der Link:

https://www.soscisurvey.de/test142977/?act=7mF7elRuOabQbLCe5ZoryJsF

Vielen Dank und schonmal ein schönes Wochenende,

Marco

Answer 1

Danke für den Link. Das Problem ist, dass der JavaScript-Code zur Aktivierung des Schiebereglers erst unter der Fragebogen-Seite eingebunden wird. Sagen Sie Ihrem Script per onload-Event, dass es erst nach dem vollständigen Laden der Seite laufen soll:

<script type="text/javascript">

window.addEventListener("load", function() {
  var slider=SoSciSliders.getSlider("UV01_01");                
         
  function updateSlider() {
                  var rohwert = slider.getValue();
                  var wertA= 10-10*(rohwert-1);
                  var wertB= 10*(rohwert-1);
                  var wertA = Math.round((10-0.1*(rohwert-1))*100)/100;
                  var wertB = Math.round((0.1*(rohwert-1))*100)/100;
          document.getElementById("valueA").innerHTML= wertA;
          document.getElementById("valueB").innerHTML= wertB;
  }
                
  slider.addEventListener("click", updateSlider);
});
</script>

Comments

Vielen lieben Dank, jetzt alles funktioniert einwandrei.