Refresh des HTML-Elements

Question

Zunächst vielen Dank für die Antwort, die mir sehr weiter geholfen hat.

Ich möchte nun, dass das HTML-Element, welches die Summe der Schieberegler darstellen soll, bei jedem "click" geändert wird.

Dazu habe ich folgenden Code geschrieben:

Beispiel für den ersten Schieberegler.

(...)

SoSciSliders.getSlider("A115_01").addEventListener("click", function() {

var summe = 
                SoSciSliders.getSlider("A115_01").value +
                SoSciSliders.getSlider("A115_02").value +
                SoSciSliders.getSlider("A115_03").value +
                SoSciSliders.getSlider("A115_04").value +
                SoSciSliders.getSlider("A115_05").value +
                SoSciSliders.getSlider("A115_06").value;
    
function refreshsumme() {

  // Display
  var content = document.createTextNode(summe + " %");
  displaysumme.appendChild(content );

}

});

(...)

Leider ändert sich durch die Verschiebung des 1. Schiebereglers nicht die Summe (also das HTML-Element).

Ohne

SoSciSliders.getSlider("A115_01").addEventListener("click", function() {}

funktioniert es - allerdings wird mir als Summe -54 (%) angezeigt und nicht 0 (%). Vielleicht weiß auch hierzu jemand eine Antwort.

Ich danke vielmals im Voraus!

Answer 1

Die Funktion, welche die Summe berechnet und aktualisiert, sollten Sie separat definieren, also z.B.

function c() {
  var summe = 
                SoSciSliders.getSlider("A115_01").value +
                SoSciSliders.getSlider("A115_02").value +
                SoSciSliders.getSlider("A115_03").value +
                SoSciSliders.getSlider("A115_04").value +
                SoSciSliders.getSlider("A115_05").value +
                SoSciSliders.getSlider("A115_06").value;

  // Display
  var content = document.createTextNode(summe + " %");
  displaysumme.appendChild(content );
}

Da fehlen noch ein paar Details, und vor der Aktualisierung muss auch der vorige Inhalt aus displaysumme entfernt werden ... aber mir geht es um etwas anders. Nämlich, dass Sie diese Funktion dann für jeden Schieberegler registrieren können:

SoSciSliders.getSlider("A115_01").addEventListener("click", refreshsumme);
SoSciSliders.getSlider("A115_02").addEventListener("click", refreshsumme);
SoSciSliders.getSlider("A115_03").addEventListener("click", refreshsumme);

allerdings wird mir als Summe -54 (%) angezeigt

Die Methode .value() gibt Ihnen den im Schieberegler gespeicherten Code zurück. Dieser liegt bei 1 bis (default) 101, wenn der Regler bedient wurde. Und er ist -9, wenn das nicht der Fall ist. Sechs Regler, die noch keinen Wert haben - das macht -54.

Sie müssten beim Summieren also mit einer kleinen FOR-Schleife alle Schieberegler durchgehen - wenn der Wert >0 ist, dann wird der Wert-1 zur Gesamtsumme addiert, sonst nicht.