Dynamisches Einblenden kombinierter Fragen

Question

Hallo liebe alle,

ich hänge gerade daran, eine kombinierte Frage (2 Dropdown-Menüs, kombiniert als Tabelle) vorangestellten Auswahlfrage (j/n) dynamisch ein- und ausblenden zu lassen. Mit den anderen 'unkombinierten' Fragen funktioniert das auch alles wunderbar, nur leider bei dieser nicht. Ich habe bereits versucht, mit DIV-Elementen zu arbeiten, wie auf der Hilfsseite zum Einblenden von Optionen empfohlen - leider erfolglos.
Jetzt habe ich gelesen, dass das dynamische Einblenden von kombinierten Fragen aber vielleicht doch nicht möglich ist. Möglicherweise weiß ja jemand Bescheid, hat dasselbe Problem schon einmal gehabt, und/oder hat vielleicht noch einen anderen Lösungsansatz parat?

Liebe Grüße!

Comments

Das hier sollte schonmal ein Stück weiterhelfen:
https://www.soscisurvey.de/help/doku.php/de:general:browser-tools

Und wenn Sie dann einen Fehler sehen, posten Sie diesen gerne. Und/oder einen Pretest-Link direkt zur betroffenen Seite.

---

Vielen lieben Dank für die schnelle Antwort!
Die IDs habe ich gecheckt, vielleicht hätte ich das im Originalpost dazuschreiben sollen. Es wird auch kein Fehler angezeigt.
Hier der Pretest-Link: https://www.soscisurvey.de/test322622/?act=9ldRvRp9fCv3Igeqd6NQVcC1
und hier der genutzte Code (ZB02 - 04 sind die DIV-Elemente, die ich genutzt und vorher definiert habe):

<script type="text/javascript">
(function () {

new DynamicFilter("DF01", "ZB02");
new DynamicFilter("DF01", "ZB03");
new DynamicFilter("DF01", "ZB04");

function DynamicFilter(auswahlID, frageID) {
    var optionE = document.getElementById(auswahlID  + "_01a");  // HTML-ID der Auswahloption "Ja"
    var optionF = document.getElementById(auswahlID  + "_02a");  // Option "Nein"
    var frage = document.getElementById(frageID + "_qst");  // HTML-ID der Texteingabe
 
  function toggle3 () {
      // Die Bedingung prüft also: Ist Option E ausgewählt?
      if (optionE.checked) {
        // Wurde "Ja" ausgewählt, dann wird die Frage angezeigt
        // Keine Angabe ("") verwendet die Standard-Einstellung (normal anzeigen)
        frage.style.display = "";
      } else {
        // Mit der Anzeigeoption "none" wird die Frage ausgeblendet
        frage.style.display = "none";
      }
    }
 
    // Die Funktion soll jedesmal ausgeführt werden, wenn eine der drei Optionen angeklickt wird
    SoSciTools.attachEvent(optionE, "click", toggle3);
    SoSciTools.attachEvent(optionF, "click", toggle3);
 
    // Und jetzt gleich soll sie auch ausgeführt werden, damit die Anzeige zu Beginn korrekt ist
    // (z.B. ausblenden der Texteingabe zu Beginn)
    toggle3();
}
  })();

// -->
</script>

Ich hoffe, das reicht erstmal für einen Einblick. Ansonsten kann ich gerne mehr posten.

LG

Answer 1

Wenn Sie die Felder "ja", "nein" anklicken, erscheinen Fehler ;)

Uncaught TypeError: frage is null

Bezieht sich auf

frage.style.display = "none";

Und bedeutet, dass es hier knirscht:

var frage = document.getElementById(frageID + "_qst");

Es gibt im Quelltext nämlich keine ID "ZB04_qst" (oder andere davon). Aber lassen das das +"_qst" doch mal weg, denn Sie haben die IDs ja selbst erstellt, nur ohne _qst, also

var frage = document.getElementById(frageID);

<div id="ZB02">

<!-- begin question(TZ01) -->
<div class="SoSciDebug question pretest">
					<div class="container">
						<div class="ballot"></div>
						<div class="box">
							<div class="label">TZ01</div>
</div>
					</div>
					<!-- TODO: Variables per question (debug only) -->
				</div>
<b> Wann wurde die Maßnahme zuerst durchgeführt? </b>

<br>
<br>
<!-- end question(TZ01) -->
...

Comments

Ah super, das funktioniert. Dankeschön LG