Anwählen und darauffolgendes Abwählen einer Antwortauswahl führt nicht zur gewünschten Filterfunktion

Question

Unten der dazugehörige HTML-Code:

Sobald G026_01 angekreuzt wurde funktioniert der Filter sofort, sobald man Ihn aber wieder abwählt, verfällt die Filterfunktion.

Nach der "var frage 1" kommt aber der gleichen Fragebogenseite nochmals weitere 6 Mal diese Art von Filter. Alle bauen auf dem vorherigen Filter auf (Es handelt sich um Fragen innerhalb 7 Zeitphasen). Sollte bspw. bei Phase 1 die Antwort G026_01 ausgewählt worden sein, sollen alle anderen Phasen danach nicht erscheinen. Falls G026_01 nicht ausgwählt wurde soll Phase 2 erscheinen (blockG008).

Durch erneutem Abwählen von G026_01 folgt leider der Effekt, dass alle 7 Phasen auf einmal eingeblendet werden.

Wo könnte das Problem liegen?

<script type="text/javascript">
<!--

var optionA = document.getElementById("G026_01");
var frage1 = document.getElementById("blockG008");


function toogle1() {
  if ((optionA.checked)) {  
    frage1.style.display = "none";
  } else {
    frage1.style.display = "";
}

}
 
SoSciTools.attachEvent(optionA, "click", toogle1);
toogle1();
// -->
</script>

Answer 1

Nach der "var frage 1" kommt aber der gleichen Fragebogenseite nochmals weitere 6 Mal diese Art von Filter.

Womöglich haben Sie ein Namensproblem ... haben Sie den Funktionsnamen toogle1 mehrfach verwendet?

Haben Sie die JavaScript-Fehlerkonsole auf Fehler hin überprüft? Fehler finden

Wenn Sie das Problem damit nicht eingrenzen können, müsste ich Sie um einen Pretest-Link direkt (!) zur betroffenen Seite im Fragebogen bitten. Dann kann ich mir das mal im Kontext ansehen.

Comments

Vielen Dank für Ihre Antwort. Bisher konnte ich noch nicht mit Ihren ersten Vorschlägen das Problem beheben. Aus diesem Grund finden Sie hier wie gewünscht einen Pre-Test-Link, der direkt zur Seit führt: https://www.soscisurvey.de/AbsolventInnenbefragung_2021/?act=AManlz1LnNsq8aQbaO3aiy91

---

In dem Quellcode der Seite steht ein paar mal:

<script src="../script/oFbGeneral.js" type="text/javascript"></script>

Diese Bibliothek gibt es nicht mehr, diese Zeilen können Sie entfernen. Außerdem ist oFbGeneral nur noch ein Alias für SoSciTools. Das können Sie austauschen, müssen Sie aber nicht.

Weiterhin haben Sie noch eine JavaScript-Block mit "checkAlternative5", der nicht korrekt ausgezeichnet ist. Da fehlt die spitze Klammer vor dem <script> zu Beginn.

Das toogle1() scheint auch korrekt funktionieren. Also, mehr oder weniger. Wenn man oben in der Mitte das "bis heute" ankreuzt, dann erscheint unten ein zweiter Block. Beziehungsweise verschwindet es und wenn man wieder abwählt, dann erscheint er. Aber das passt zum Code, denn dort steht, dass der Block nicht angezeigt ("none") werden soll, wenn das Kreuzchen gesetzt ist.

if ((optionA.checked)) {  
    frage1.style.display = "none";
} else {
    frage1.style.display = "";
}

Ich vermute, es war von Ihnen eigentlich genau andersherum gedacht?

---

Ich habe nun die Codes bzgl. " <script src="../script/oFbGeneral.js" type="text/javascript"></script> " und dem "oFbGeneral" korrigiert sowie die fehlende spitze Klammer eingefügt.

Das toogle1() funktioniert soweit wie Sie richtig sagen teilweise korrekt. Zu Beginn beim Aufruf der Seite wird der 2. Block korrekterweise nicht angezeigt. Wählt man "bis heute" so soll immerhin nein 2. Block erscheinen.

Das Problem ist nun, dass durch erneutes Abwählen von "bis heute" auf einmal ALLE 6 weiteren Blöcke erscheinen, obwohl diese weiterhin unsichtbar sein sollten.

Die Sichtbarkeit eines weiteren Blocks soll/wird darüber geregelt, wenn im rechten Dropdown "Jahr" eine Jahreszahl ausgewählt wurde

---

> Das Problem ist nun, dass durch erneutes Abwählen von "bis heute" auf einmal ALLE 6 weiteren Blöcke erscheinen

Nun ja, Sie schreiben bei toogle2() folgendes:

if ((optionB.checked) | (optionC.checked))

Kleinigkeit am Rand: Das logische "Oder" wird mit zwei Pipes (||) angegeben, der einfache Pipe, den Sie verwenden ist eine Bit-Operation. Das kann hier funktionieren, ist aber nicht ganz korrekt.

Das Problem ist, dass sich die unterschiedlichen Filterfragen ein Stück weit widersprechen. Wenn Sie die oberste Option "bis heute" abwählen, dann greifen ganz viele Filter, z.B.

function toogle2() {
  if ((optionB.checked) | (optionC.checked)) {  
    frage2.style.display = "none";
  } else {
    frage2.style.display = "";
}

optionC (das ist das besagte "bis heute") ist nicht markiert, das andere Kreuzchen ist auch nicht gesetzt. Also wird die Frage angezeigt.

> Die Sichtbarkeit eines weiteren Blocks soll/wird darüber geregelt, wenn im rechten Dropdown "Jahr" eine Jahreszahl ausgewählt wurde

Dann müssten Sie diese Bedingung in dem Filter noch ergänzen. Zum Beispiel können Sie mit (document.getElementById("G007").value > 0) prüfen, ob eine Jahreszahl im ersten Feld ausgewählt wurde.

Was mich im Moment aber eher umtreibt: Warum muss man das Kreuzchen "bis heute" (G026_01) erst einmal auswählen und dann wieder abwählen, damit die rechtlichen Fragen erscheinen? Ich empfehle, dass Sie in allen toogle()-Funktionen ein console.log() ergänzen, damit man das besser nachvollziehen kann. Also:

function toogle1() {
  console.log("toogle1");
  if (optionA.checked) {  
    frage1.style.display = "none";
  } else {
    frage1.style.display = "";
  }
}