Fragen ausblenden, bis vorherige Frage entsprechend beantwortet wurde

Question

Guten Tag,

ich möchte in meinem Fragebogen Fragen auf einer Fragebogenseite ausblenden, bis die zugehörige Filterfrage entsprechend mit Ja bzw. Nein beantwortet wurde.
Dazu habe ich das Javascript aus dem Hilfrebereich entsprechend angepasst und bei Fragebogen erstellen hinter den beiden Fragen auf der entsprechenden Seite platziert.
Allerdings wird die zweite Frage dennoch nicht ausgeblendet. Ich habe sowohl probiert, ds Skrip als HTML-Textbaustein einzufügen als auch direkt als HTML-Skript.

Dies ist mein Code:

<script type="text/javascript">
var optionA = document.getElementById("TR01_01a");
var optionB = document.getElementById("TR01_02a");
var frage =document.getElementById("TR02_qst");
function toogle() {
    if (optionA.checked) {
       frage.style.display = "";
    } else {
       frage.style.display = "none";
    }
}
SoSciTools.attachEvent(optionA, "click", toogle);
SoSciTools.attachEvent(optionB, "click", toogle);
toogle();
</script>

Hier ist der Pretest-Link zur entsprechenden Seite:
https://www.soscisurvey.de/professionalisierung2021/?act=WTRb7ITpNtD7S6UL0ylKMTCh

Ich hoffe, der Fehler findet sich.

Mit freundlichen Grüßen

Answer 1

Die JavaScript-Konsole im Browser sagt dazu:

Uncaught Error: No element specified for SoSciTools.attachEvent()
    attachEvent https://www.soscisurvey.de/script/SoSciTools.min.js?i=1293:60
    <anonymous> https://www.soscisurvey.de/professionalisierung2021/?act=WTRb7ITpNtD7S6UL0ylKMTCh:342

Ein attachEvent haben Sie in diesen Zeilen:

SoSciTools.attachEvent(optionA, "click", toogle);
SoSciTools.attachEvent(optionB, "click", toogle);

Die Meldung bezieht sich konkret auf die zweite Zeile.

Die Meldung beschwert sich nun darüber, dass kein Element (der erste Parameter) vorliegt. Das heißt, dass optionB nicht definiert sei. Definiert wird sie eigentlich hier:

var optionB = document.getElementById("TR01_02a");

Elemente mit diesen HTML-IDs gibt es aber im Quellcode. Daran liegt es also schonmal nicht.

Nächter Kandidat: Die Reihenfolge. Die Optionen (Elemente) müssen definiert sein, bevor das JavaScript kommt. Auch das scheint hier gegeben, denn das Script steht unter den Elementen.

Also nochmal genau in den Quellcode geschaut ... und tatsächlich. Dort steht etwas anderes, als Sie in Ihrer Frage gepostet haben:

var optionB = document.getElementById(" TR01_02a"); 

Sieht genauso aus? Fast: Da steht ein Leerzeichen vor dem TR01 - also innerhalb des Strings mit der ID. Wahrscheinlich ist dieses kleine Leerzeichen die (oder zumindest eine) Ursache, dass es nicht funktioniert.