JavaScript zur "Live"-Auswertung des Schiebereglers für Teilnehmer

Question

Hallo,

ich habe folgendes Problem: Ich lasse Probanden in meinem Fragebogen eine prozentuale Aufteilung ihres Vermögens in verschiedene Kategorien vornehmen. Dabei ist es wichtig, dass sich die Angaben in den verschiedenen Schiebereglern auf 100 % addieren.

Damit die Probanden die Übersicht behalten und nicht ständig rechnen müssen, würde ich ihnen gerne unterhalb des Schiebereglers feedback geben, wie viel % sie derzeit verteilt haben.

Dazu habe ich bereits folgenden (funktionierenden) JaveScript-Code programiert:

function updateText() {
var output = document.getElementById("text");
if (textInput.value != "") {
output.innerHTML = textInput.value;
}
}
var textInput = document.getElementById('DS17_01');
window.setInterval(updateText, 100);

Dieser Code gibt jedoch nur den Wert des ersten Schiebereglers aus (DS17_01). Optimalerweise sollte er jedoch die Summe aller Schieberegler ausgeben. Dazu habe ich folgenden Code dazugeschrieben (anstelle von var textinput =...):

function add()
{
var a = parseInt(document.getElementById('DS17_01').value);
var b = parseInt(document.getElementById('DS17_02').value);
var c = parseInt(document.getElementById('DS17_03').value);
var d = parseInt(document.getElementById('DS17_04').value);
var e = parseInt(document.getElementById('DS17_05').value);
var f = parseInt(document.getElementById('DS17_06').value);
var result = parseInt(a*1 + b*1 + c*1 + d*1 + e*1 + f*1);
document.getElementById("result").innerHTML = result;
}

var textInput = document.getElementById( result );

Allerdings wird mir dann entweder immer "null" oder "unidentified" ausgegeben, statt die Summe aller Werte.

Wo liegt mein Fehler und wie kann der Code angepasst werden, damit die Teilnehmer stets die Summe aller Schieberegler "live" auf der Seite sehen?

Vielen Dank für eine Antwort im Voraus!

Viele Grüße

Answer 1

Mit der Funktion SoSciSliders.getSlider(String sliderID) bekommen Sie ein JavaScript-Objekt, welches den Schieberegler steuert. Dieses Objekt hat die Methode getValue(), um den aktuellen Wert abzufragen (nicht gerundet!).

Details finden Sie in der Anleitung zum Schieberegler

Hier noch ein Beispiel-Code:

var slider1 = SoSciSliders.getSlider("DS17_01");
var slider2 = SoSciSliders.getSlider("DS17_02");

function add() {
  var result = slider1.getValue() + slider2.getValue();
  document.getElementById("result").innerHTML = result;
}

slider1.addEventListener("click", add);
slider2.addEventListener("click", add);

Die letzten Zeilen sorgen dafür, dass die Funktion add() aufgerufen wird, wenn sich einer der Schieberegler ändert.

Answer 2

Vielen Dank für die schnelle Antwort!

Ich habe den Code nun entsprechend Ihrer Vorschläge geändert, jedoch wird immernoch "Leer" angezeigt (Textfeld scheint nicht geändert zu werden).

Das ganze sieht nun wie folgt aus:

function updateText() {
var output = document.getElementById("text");
if (textInput.value != "") {
output.innerHTML = textInput.value;
}
}

var slider1 = SoSciSliders.getSlider("DS17_01");
var slider2 = SoSciSliders.getSlider("DS17_02");
var slider3 = SoSciSliders.getSlider("DS17_03");
var slider4 = SoSciSliders.getSlider("DS17_04");
var slider5 = SoSciSliders.getSlider("DS17_05");
var slider6 = SoSciSliders.getSlider("DS17_06");

function add() {
var result = slider1.getValue()1 + slider2.getValue()1 + slider3.getValue()1 + slider4.getValue()1 + slider5.getValue()1 + slider6.getValue()1;
document.getElementById("result").innerHTML = result;
}

slider1.addEventListener("click", add);
slider2.addEventListener("click", add);
slider3.addEventListener("click", add);
slider4.addEventListener("click", add);
slider5.addEventListener("click", add);
slider6.addEventListener("click", add);

var textInput = document.getElementById( result );
window.setInterval(updateText, 100);

Gefolgt von folgendem PHP-Code:

html('

Leer

');
text('js_insert');

In der Konsole des Browsers wird angezeigt, dass slider1 (oder jeder andere wenn dieser ausgeblendet wird) "unidentified" ist.

Woran kann dies jetzt noch liegen?

Viele Grüße