Fragen bei Auswahl einer bestimmten Option sofort einblenden - Skala Extrema beschriftet und folgende Mehrfachauswahl

Question

Hallo zusammen,
ich sitze jetzt seit mehreren Tagen an dem gleichen Problem und komme einfach nicht weiter.
Ich habe in meinem Fragebogen eine Itembatterie als Skala (Extrema beschriftet) angelegt (Insgesamt 4 Items).
Ziel wäre wenn bei einem dieser Items eine bestimmte Auswahl getroffen wird ("Trifft überhaupt nicht zu" und 2) im Folgenden eine Mehrfachauswahl angezeigt wird, bei der die Befragten angeben, warum Sie "Trifft überhaupt nicht zu" und 2 angeklickt haben.

Ich bin absoluter JavaScript und HTML-Anfängerin und habe mich durch die ganzen Anleitungen zu "Fragen bei der Auswahl einer bestimmten Option sofort einblenden" durchgekämpft und auch die Antworten auf die hier bereits gestellten Fragen durchgearbeitet.
Ich habe folgenden Code, um dieses Thema umzusetzen:

<script type="text/javascript">
<!--
var optionA = document.getElementById("ZU03_31");
var optionB = document.getElementById("ZU03_32");
var optionC = document.getElementById("ZU03_33");
var optionD = document.getElementById("ZU03_34");
var optionE = document.getElementById("ZU03_35");
var optionF = document.getElementById("ZU03_03DK");
var frage1 = document.getElementById("ZU02");
 
function toogle() {
  if (optionA.checked) || (optionB.checked) {
    frage1.style.display = "";
  } else {
    frage1.style.display = "none";
  }
}
 
SoSciTools.attachEvent(optionA, "click", toogle);
SoSciTools.attachEvent(optionB, "click", toogle);

toogle();
// -->
</script>

Die folgende Mehrfachauswahl wird beim Wechsel auf die Fragebogenseite immer angezeigt. Sobald aber alle vier Items beantwortet wurden, unabhängig von den Antworten, springt der Fragebogen auf die nächste Seite und die Mehrfachauswahlfrage kann nicht beanwortet werden.

In der Konsole wird folgender Fehler angezeigt Uncaught SyntaxError: missing ( before condition
Wenn ich wie in einer anderen Anleitung steht hier noch Klammern hinzufüge, funktioniert der Code aber auch nicht.

Ich wäre sehr, sehr dankbar, wenn Sie mir weiterhelfen könnten. Vielen herzlichen Dank schon Mal!

Answer 1

Nicht schlecht. Hier zwei Fehler, welche die korrekte Ausführung wahrscheinlich verhindern:

var frage1 = document.getElementById("ZU02");

Die korrekte HTML-Kennung des Frage-Element ist wahrscheinlich ZU02_qst, also müsste es heißen

var frage1 = document.getElementById("ZU02_qst");

Und die Fehlermeldung, die Sie in der Konsole korrekte identifziert haben, bezieht sich auf diese Zeile:

  if (optionA.checked) || (optionB.checked)

Die Bedingung eines IF-Filters muss (komplett) in Klammern stehen. Demnach wäre korrekt

  if ((optionA.checked) || (optionB.checked))

Außerdem müssen Sie das

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

Für alle Optionen plus Ausweichoption aufrufen, damit die Frage bei Auswahl einer anderen Option auch wieder ausgeblendet wird.

Evenutell ginge es übrigens auch einfacher, und zwar

<script type="text/javascript">
window.addEventListener("load", function() {
  // Frage TX01 anzeigen, wenn in JN01 entweder 1 oder 2 ausgewählt wurde
  new SoSciTools.ToggleSelection("ZU03_3", [1,2], ["ZU02_qst"]);
});
</script>

Probieren Sie es gerne mal aus, wobei ich nicht sicher bin, ob ToggleSelection mit den Skalenoptionen korrekt umgeht.