Ausblenden von Items (auf derselben Seite)

Question

Liebes SoSciSurvey-Team,

ich will gerne Items abhängig von den Antworten ausblenden.
Beispiel:
Item 1(E104): Frage nach Erwerbsstaus 1) Vollzeit, 2) Teilzeit, 3) arbeitslos
Item 2 (E105) soll nur bei Antwort 2) und 3) eingeblendet werden bzw. bei Antwort 1) ausgeblendet.

Hierfür habe ich gelesen, dass ich einen JavaScript Code verwenden soll.
Ich habe den Folgenden versucht, es klappt leider nicht bei der Fragebogenzusammenstellung.

Ich freue mich über Unterstützung hierbei!

Lieben Dank!

<script type="text/javascript">
<!--
var dropdown = document.getElementById("E114");  
var frage = document.getElementById("E115_qst"); 
 
function toogle() {
  if (dropdown.value == "2", "3") {  
    frage.style.display = "";
  } else {
    frage.style.display = "none";
  }
}
 
SoSciTools.attachEvent(dropdown, "change", toogle); 
SoSciTools.attachEvent(dropdown, "click", toogle);  
toogle();  
// -->
</script>

Comments

Der Code, den Sie verwenden, bezieht sich auf eine komplette Frage. Meinen Sie mit Items "Fragen" im Sinne des SoSci-Fragenkatalogs?

---

Lieben Dank für die schnelle Rückmeldung.
Ich meine eine Frage innerhalb der Soziodemografie, kein Item innerhalb eines Fragebogens.
Komischerweise funktioniert dieser Code (also das Ausblenden eines Items in Abhängigkeit von einer vorherigen Itemantwort bei Auswahlfragen) auf einer Seite des Fragebogens (Seite 4; in Abhängigkeit von der Frage D108 wird D109 eingeblendet oder nicht). Weder auf S. 7 (E114 und E115) noch auf S.5 (E103 und E104) funktioniert dieser (identisch aufgebaute) Code.
Auf Seite 5 habe ich noch einen weiteren Code (E104 auf E105) erstellt, der sich - anstatt auf eine Auswahl - auf ein Dropdown-Menü bezieht, dieser funktioniert auch. Ich verstehe es einfach nicht. Ich wäre sehr dankbar für Unterstützung.
Der Link zum Pretest lautet: https://www.soscisurvey.de/resistkrebs/?act=n87rp1sF1mbr3tWstNmKUAQu
Mir wird kein Fehler angezeigt. Die Programmierung funktioniert schlicht nicht.

---

> Weder auf S. 7 (E114 und E115) noch auf S.5 (E103 und E104) funktioniert dieser (identisch aufgebaute) Code.

Die erste Vermutung wäre, dass die Elemente auf der Seite anders heißen.

Wenn Sie einen Pretest-Link direkt (!) zur Seite 7 posten (ich mag die Seiten vorher nicht alle ausfüllen), dann sehe ich mir gerne nochmal an. Aber das
(dropdown.value == "2", "3")
kann so nicht funktionieren. Da bin ich ziemlich sicher :)

---

Lieben Dank für die Antwort: Hier der Testlink ab S.7: https://www.soscisurvey.de/resistkrebs/?act=6hgvWa7NXz90LzDEVuoApjkt

(Die Syntax vom Dropdown Menü habe ich geändert :) ).

Wie meinen Sie, dass die Elemente auf der anderen Seite anders heißen? Sie beziehen sich jeweils auf andere Fragen, aber immer auf Auswahlfragen.

Lieben Dank, freue mich über die Unterstützung.

---

Danke für de Pretest-Link.

Die Fehlerkonsole im Browser zeigt folgendes an:

    SyntaxError: expected expression, got '||'

Was er damit meint ist folgende Zeile

    if ((dropdown.value == 2) || (dropdown.value == 3)) || (dropdown.value == 5)) {

und genauer die Klammern. Denn nach dem mittleren Block geht die äußere Klammer bereits zu. Deshalb ist JavaScript überrascht, dass da ein || kommt. Bitte entfernen Sie die überflüssige Klammer:

    if ((dropdown.value == 2) || (dropdown.value == 3) || (dropdown.value == 5)) {

Wenn es dann noch nicht funktioniert, sagen Sie kurz Bescheid. Dann sehen wir uns an, worüber JavaScript als nächstes meckert.

---

Lieben Dank für den Hinweis. Es funktioniert leider trotzdem (noch) nicht. Wenn ich bei der Frage zuvor den Wert "1" auswähle, sollte die folgende Frage ausgeblendet werden - dem ist jedoch nicht so. Ausschließlich die Fragenbogennummerierung verschwindet.
Ich habe die Fehlermeldung gar nicht gesehen - wo finde ich die denn?
Lieben Dank.

---

Sie haben zwei "Sie sind" Fragen direkt untereinander. Ich denke, es funktioniert korrekt, man sieht es nur nicht gleich.

> Ich habe die Fehlermeldung gar nicht gesehen - wo finde ich die denn?

Das kommt auf den Browser an. Hier eine Übersicht: https://documentation.concrete5.org/tutorials/how-open-browser-console-view-errors

---

Lieben Dank - Sie haben recht es funktioniert! Super!


Leider komme ich - trotz Einsicht der Fehlermeldung - auf einer anderen Seite nicht weiter:
https://www.soscisurvey.de/resistkrebs/?act=BrUv29O5cLLRS1b9in8KKYDY

Ich habe dort versucht einzustellen, dass wenn Item 103 mit ja (Option A) beantwortet wird, sowohl Item 104 und 105 ausgeblendet werden. Und wenn 103 mit nein beantwortet wird, dass zunächst nur 104 gezeigt wird und 105 zunächst ausgeblendet bleibt. 105 soll nur erscheinen, wenn 104 die Option ("Sonstiges Land; -1) ausgewählt wird.

Der folgende Fehler wird mir bei der Programmierung (Ausblendung Item 104 und 105 wenn 103 mit Ja beantwortet wird) angezeigt:
SCRIPT5007: SCRIPT5007: Unable to set property 'display' of undefined or null reference
Können Sie mir hier weiterhelfen? Lieben Dank.

---

In Firefox lautet die Meldung ein wenig anders, meint aber das gleiche:

TypeError: frage.style is undefined

Und zwar hat das Objekt "frage" kein Attribut/Inhalt "style". Das heißt am wahrscheinlichsten, dass "frage" keinen Inhalt hat. Diese Variable wiederum wird hier definiert:

var frage = document.getElementById("E104_qst") || ("E105_qst");  

Okay ... das bedeutet: Liebes JavaScript, sieht bitte nach, ob es die eine oder die andere Frage gibt. In der Variable steht also kein Verweis mehr auf das Element der Frage, sondern einfach nur noch "true", also ja, es gibt da was.

Zwei Fragen brauchen zwei Variablen:

var frage1 = document.getElementById("E104_qst");
var frage2 = document.getElementById("E105_qst");  

Und dann später im Code:

frage1.style.display = "";
frage2.style.display = "";

Und das gleiche nochmal mit "none".

---

Lieben Dank für die schnelle Rückmeldung.
Ich bekomme immer noch dieselbe Fehlermeldung. Woran kann das liegen?

---

Wenn ich es richtig sehe, haben Sie den JavaScript-Code über der Frage E104 in die Fragebogen-Seite eingebunden. An dieser Stelle existiert dsa HTML-Element mit der ID "E104_qst" noch nicht. Bitte schieben Sie den JavaScript-Code einfach weiter nach unten.

---

Perfekt! Herzlich Dank für die tolle Unterstützung!

Answer 1

Die folgende Syntax ist kein gültiges JavaScript:

if (dropdown.value == "2", "3") {  

Ich denke, Sie meinen das hier:

if ((dropdown.value == 2) || (dropdown.value == 3)) {  

Wenn es damit noch nciht funktioniert, werfen Sie bitte einen Blick in die Fehlerkonsole Ihres Brwosers und posten Sie hier den evtl. angezeigten Fehler sowie einen Pretest-Link direkt (!) zur betroffenen Fragebogen-Seite. Danke.