JS Filter bei MCM mit Ausweichotion

Question

Ich habe eigentlich schon viele JS programmiert, aber ich habe das Gefühl, dass die Ausweichoption das nicht so mitmacht wie ich möchte. Das is mein momentaner Ansatz (einer von vielen). Funktioniert auch, bis auf die Tatsache, dass wenn ich beide Kreuze gesetzt habe bei "Ja", und dann auf die Ausweichoption wechsel, die Textfenster nicht verschwinden:

<script type="text/javascript">
var optionA = document.getElementById("B003_01");  // Checkbox: Ja (MCM)
var optionB = document.getElementById("B003_02");  // Checkbox: Ja (MCM)
var optionC = document.getElementById("B003_R1");  // Ausweichoption Checkbox: Nein
var frage = document.getElementById("B004_qst");   // Textfeld 1
var frage2 = document.getElementById("B005_qst");  // Textfeld 2

function toggle() {
    if (optionC.checked)  {
      frage.style.display = "none";
      frage2.style.display = "none";
    } 
    
    if (optionA.checked) {
        frage.style.display = "";
      } else {
        frage.style.display = "none";
}
      
    if (optionB.checked) {
        frage2.style.display = "";
      } else {
        frage2.style.display = "none";
}
    }
  
  

// Ereignis-Handler registrieren
SoSciTools.attachEvent(optionA, "click", toggle);
SoSciTools.attachEvent(optionB, "click", toggle);
SoSciTools.attachEvent(optionC, "click", toggle);

// Initialzustand setzen
toggle();
</script>

Answer 1

Es handelt sich hier um ein Timing-Problem - genauer gesagt um die Reihenfolge, in welcher welches JavaScript ausgeführt wird.

HTML sieht es nicht vor, dass Checkboxen exklusiv sind. Also, dass die Ausweichoption nicht zusammen mit den anderen beiden Optionen gewählt werden kann. Diese Funktionalität rüstet SoSci Survey mittels JavaScript nach.

Nun wird das JavaScript von SoSci Survey aber erst nach dem Laden der Seite aktiviert, Ihres schon vorher. Das bedeutet, dass erst Ihr JavaScript läuft - da sind alle drei Optionen noch aktiviert - und dass erst im Anschluss daran die beiden Optionen abgewählt werden.

Die einfachste Lösung in Ihrem Fall: Verlassen Sie mit einem return die Funktion, wenn Option C gewählt ist oder stellen Sie diese Bedingung ans Ende der Funktion.

if (optionC.checked)  {
  frage.style.display = "none";
  frage2.style.display = "none";
  return;
} 

Alternativ könnten Sie Ihren Code erst verzögert laufen lassen, das ist in diesem gut überschaubren Fall aber komplizierter als die o.g. Lösungen.

Comments

Ich bin nicht ganz happy mit dem Verhalten. Ich hatte überlegt, es ohne Ausweichoption anzulegen und die Ausweichoption auch über JS zu simulieren- aber das ist ja quasi, was SoSci schon macht, richtig?

---

> aber das ist ja quasi, was SoSci schon macht, richtig?

Ja. Warum sind Sie denn mit dem Verhalten noch nicht zufrieden?

Möchten Sie vielleicht mal einen Pretest-Link direkt zur betroffenen Seite erstellen und posten?

---

Gerne: https://ofb.iea-hamburg.de/stars-SLFB/?act=ETPlAf26VbHNR3JlhWwRVrP1

Das Problem ist wenn man auf "Nein" klickt und die Antwort anschließend auf Option 1 oder Option 2 ändert. Dann wird kein Textfeld angezeigt.

---

Bitte ersetzen Sie

SoSciTools.attachEvent(optionA, "click", toggle);
SoSciTools.attachEvent(optionB, "click", toggle);
SoSciTools.attachEvent(optionC, "click", toggle);

einmal durch

window.appendEventListener("load", function() {
    s2.B003.addEventListener("click", toggle);
});

---

Habe ich ersetzt:

// Ereignis-Handler registrieren
window.appendEventListener("load", function() {
    s2.B003.addEventListener("click", toggle);
});

// Initialzustand setzen
toggle();

Scheint nicht zu greifen

---

Pardon, es muss natürlich auch in der ersten Zeile "addEventListener" statt "appendEventListener" heißen.

---

oh, das hätte mir auch auffallen können- sorry. Das schiebe ich auf den Freitag...

Edit: funktioniert jetzt- vielen Dank