Problem beim Ausblenden von Elementen

Question

Guten Tag,

ich arbeite derzeit an einem Fragebogen, in dem ich die Fragen KD15 und KD16 kombiniert habe. Beide Fragen sind vom Typ "Skala Zwischenwerte beschriftet". Mein Ziel ist es, Item 1 aus "KD16_01" auszublenden, wenn die Teilnehmer in Frage KD15_01 die Antwortoption "nein" (KD15_011) wählen.

In einem vorherigen Abschnitt des Fragebogens, der eine Kombination aus einer Skalafrage und einer offenen Texteingabe beinhaltet, hat das Ausblenden von Elementen bereits funktioniert. Allerdings habe ich festgestellt, dass es in diesem Fall, bei zwei Fragen vom Typ "Skala Zwischenwerte beschriftet", nicht wie erwartet funktioniert.

Hier ist der aktuelle Code, den ich verwende:

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

var optiona= document.getElementById("KD15_011");

var optionb= document.getElementById("KD15_012");

var optionc= document.getElementById("KD15_013");

var optiond= document.getElementById("KD15_014");

var optione= document.getElementById("KD15_015");


var frage= document.getElementById("KD16_01");  // HTML-ID
 
function toggle() {

if (optiona.checked) {
// Mit der Anzeigeoption "none" wird die Frage ausgeblendet
    frage.style.display = "none";
 }   else {
 frage.style.display = "";
  }
}


// Die Funktion soll jedes mal ausgeführt werden, wenn die Optionen angeklickt wird

SoSciTools.attachEvent(optiona, "click", toggle);
SoSciTools.attachEvent(optionb, "click", toggle);
SoSciTools.attachEvent(optionc, "click", toggle);
SoSciTools.attachEvent(optiond, "click", toggle);
SoSciTools.attachEvent(optione, "click", toggle);

toggle();


// -->
</script>

Interessanterweise funktioniert der Code einwandfrei, wenn ich anstelle von "var frage = document.getElementById("KD16_01");" die Zeile
"var frage = document.getElementById("KD17_qst");" verwende.

Dies lässt mich vermuten, dass der Code an sich korrekt ist. Mein Ziel ist jedoch, dass "KD16_01" ausgeblendet wird bzw. soll die Option entfernt werden etwas ankreuzen zu können.

(edit: Dies würde ja mit "var frage = document.getElementById("KD16_01_input");" funktionieren, aber leider klappt auch dies nicht. )

Ich wäre sehr dankbar, wenn Sie mir bei der Lösung dieses Problems behilflich sein könnten.

Vielen Dank im Voraus für Ihre Unterstützung :)

Comments

Ich habe es nun auch bereits mit "var frage = document.getElementById("KD16_01_input");" probiert, aber leider funktioniert auch das nicht. Ist es generell nicht möglich bei einer kombinierten Frage vom Typ "Skala Zwischenwerte beschriftet" so etwas auszublenden?  Oder gibt es eine andere Lösung?

---

Möchten Sie vielleicht mal einen Pretest-Link direkt (!) zu der betroffenen Seite posten?

Und bitte werfen Sie auch einen Blick in die JavaScript-Konsole Ihres Browsers: https://www.soscisurvey.de/help/doku.php/de:general:browser-tools

---

Hier einmal der Pretest-Link: https://webext.mh-hannover.de/soscisurvey/vepokap_versicherte/?act=h9NDjd3eFcIeZTCnHyEzoWba

Vielen Dank für die schnelle Antwort :)

---

Also, die JavaScript-Konsole im Browser sagt:

> Uncaught TypeError: frage is null

Das dedeutet, dass in dieser Zeile nichts gefunden wird:

> var frage= document.getElementById("KD16_01");  // HTML-ID

Was genau möchten Sie denn ein-/ausblenden? Sie schrieben:

> Item 1 aus "KD16_01" auszublenden

Meinen Sie alle Auswahlfelder in der ersten Zeile rechts des Trennstrichs? Dann können Sie entweder KD16_011 bis KD16_014 einzelne ausblenden oder Sie versuchen es für ide kombinierte Frage mal mit show() statt mit question(), dann könnte es einfacher gehen.

Answer 1

Genau so ist es: Wenn in KD15_01 "Nie" ausgewählt wird, sollen alle Auswahlfelder bzw. Ankreuzoptionen in der ersten Zeile rechts des Trennstrichs ausgeblendet werden. Dieses Prinzip sollte dann natürlich später auch für KD15_02 und so weiter angewendet werden.

Ich habe versucht, dies mit "Show" anstelle von "Question" umzusetzen, jedoch ohne Erfolg.
Ebenso funktioniert es nicht, KD16_011 bis KD16_014 einzeln auszublenden. Vorausgesetzt, der Code ist korrekt:

<script type="text/javascript">
<!--
var optiona = document.getElementById("KD15_011");
var optionb = document.getElementById("KD15_012");
var optionc = document.getElementById("KD15_013");
var optiond = document.getElementById("KD15_014");
var optione = document.getElementById("KD15_015");

var fragea = document.getElementById("KD16_011_");
var frageb = document.getElementById("KD16_012");
var fragec = document.getElementById("KD16_013");
var fraged = document.getElementById("KD16_014");

function toggle() {
    if (optiona.checked) {
        // Wenn "optiona" ("Nie") ausgewählt ist, alle Ankreuzoptionen ("wenig",, usw. ) ausblenden

        fragea.style.display = "none";
        frageb.style.display = "none";
        fragec.style.display = "none";
        fraged.style.display = "none";
    } else {
        // Andernfalls alle anzeigen
        fragea.style.display = "";
        frageb.style.display = "";
        fragec.style.display = "";
        fraged.style.display = "";
    }
}

// Die Funktion soll jedes Mal ausgeführt werden, wenn die Optionen angeklickt werden

optiona.addEventListener("click", toggle);
optionb.addEventListener("click", toggle);
optionc.addEventListener("click", toggle);
optiond.addEventListener("click", toggle);
optione.addEventListener("click", toggle);

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

Gibt es sonst noch andere Lösungsansätze?

Comments

Ich möchte höflich nachfragen, ob es möglicherweise alternative Lösungsansätze gibt, oder ob eine Fragestellung mit diesen Anforderungen in dieser Form nicht umsetzbar ist?