Fragen bei Auswahl einer bestimmten Option sofort einblenden - Auswahl

Question

Hallo liebes SoSci Team,

ich versuche ein Textfeld einzublenden ("AF20_qst"), wenn eine einfache Auswahl ("AF19_qst") auf "Ja" gesetzt wird.

Den entsprechenden Beispielcode aus dem Benutzerhandbuch habe ich folgendermaßen angepasst:

<script>
var option = document.getElementById("AF19_qst");     
var frage = document.getElementById("AF20_qst");  // HTML-ID der Texteingabe

function toggle() {
  // Wenn die Auswahl auf JA steht, hat die Variable der einfachen Auswahl den Wert: 1
  if (option.value == 1) {
           frage.style.display = "";
  } else {
            frage.style.display = "none";
  }
}
 
// Event "change" statt "click" verwenden bei einfacher Auswahl
SoSciTools.attachEvent(option, "change", toggle);


toggle();

</script>

Die Frage wird auch richtigerweise zu Beginn nicht angezeigt, leider aber auch nicht, wenn ich die Auswahl auf "JA" setze. Was mache ich falsch?

Vielen Dank bereits für eine Hilfestellung!

Freundliche Grüße

Comments

Was zeigt denn die JavaScript-Fehlerkonsole Ihres Browsers an?
https://www.soscisurvey.de/help/doku.php/de:general:browser-tools

Posten Sie gerne auch einen Pretest-Link direkt (!) zur betroffenen Seite.

---

Über die Funktion console.log(); habe ich herausgefunden, dass der Wert ("value") der Antwortoption bei der Auswahlfrage nicht bei jedem "change" Event gesetzt wird, sondern vermutlich erst nach Abschluss des Fragebogens.

In der Konsole erscheint zur Eingabe: console.log(option.value); die Ausgabe: undefined.
Lässt sich eine Filterfrage mit einer einfachen Ja/Nein Auswahl dann gar nicht umsetzen?

Hier der Pretest Link: https://www.soscisurvey.de/SynaesthesieProsodie/?act=T6l4IrjQzBpVseHTp8CxvhMA

Answer 1

In der Konsole erscheint zur Eingabe: console.log(option.value); die Ausgabe: undefined.

Gut, das hilft weiter. Damit sehe ich auch den Fehler:

var option = document.getElementById("AF19_qst");   

Die Variable option zeigt auf ein Block-Element auf der Seite - nämlich die Frage AF19, nicht die Auswahlfelder. Wenn AF19 eine Auswahlfrage ist, haben SIe aber nicht ein Auswahlfeld, sondern mehrere. Sie werden also optionA, optionB wie in der Anleitung Fragen bei Auswahl einer bestimmten Option sofort einblenden beschrieben definieren müssen.

Comments

Vielen Dank für die schnelle Antwort!

Ich bin mir aber nicht sicher, wie ich das umsetzen soll.
Die Frage AF19 hat als Element "Auswahl" (nicht Mehrfachauswahl) keine gesonderten Variablen für "JA" oder "NEIN".

Nach meinem Verständnis entspricht mein gewünschtes Ergebnis jenem des Dropdown-Beispiels in der Anleitung. Dort wird auch nur die numerische Antwortkennung (= value) der Variable abgefragt.

So habe ich das inzwischen auch umgesetzt, siehe Pretest: https://www.soscisurvey.de/SynaesthesieProsodie/?act=T6l4IrjQzBpVseHTp8CxvhMA

Zum Test habe ich zwei Seiten mit fast identischem Code angelegt.
Wenn ich die Frage als Dropdown einpflege, funktioniert auch der Filter wie gewünscht. Wenn ich die Frage wieder als einfache Auswahl setze leider nicht.

Es scheint fast so, als ob die einfache Auswahl ihren Wert bei Veränderung nicht ausgeben würde...

Ich wäre Ihnen sehr dankbar, wenn Sie das noch einmal ansehen könnten!

---

> keine gesonderten Variablen für "JA" oder "NEIN".

Das ist korrekt. Dennoch sind es zwei Auswahlfelder, und jedes davon hat eine eigene HTML-ID. Diese finden Sie z.B. über die Entwickler-Konsole heraus: https://www.soscisurvey.de/help/doku.php/de:general:browser-tools

Die Anleitung zum Ausblenden/Anzeigen einer Frage arbeitet ebenfalls mit einer normalen (nicht Mehrfach-) Auswahl.

---

Perfekt! Jetzt funktioniert es :)

Mir war nicht bewusst, dass die Auswahloptionen eigene IDs haben.

Warum allerdings die Abfrage mit "value" zwar bei einem Dropdown klappt, nicht  hingegen bei der einfachen Auswahl, ist mir nach wie vor ein Rätsel... Aber mit der Lösung so bin ich auch sehr zufrieden!

---

> Warum allerdings die Abfrage mit "value" zwar bei einem Dropdown klappt, nicht  hingegen bei der einfachen Auswahl, ist mir nach wie vor ein Rätsel..

Ein Dropdown ist aus HTML-Sicht ein einzelnes Element (welches die Optionen nochmal als untergeordnete Elemente hat), und dieses hat eine eigene HTML-ID und eine value-Eigenschaft.

Die beiden Auswahlpunkte sind für sich jeweils separat, da gibt es kein übergeordnetes HTML-Element, welches beide im Sinne des Dropdowns zusammenfassen würde. Jedes der Auswahlfelder hat auch eine value-Eigenschaft, aber eben fest die 1 oder die 2, unabhängig davon, was gerade ausgewählt ist.