JavaScript Programmierung Ein- und Ausblenden von Items

Question

Liebes Support Team,

ich benötige Unterstützung, ich komme einfach nicht mehr weiter:
Fragbogenlink: https://www.soscisurvey.de/resistkrebs/?act=5ElCqHilMP3mlMw36OHHhLgI

Ich versuche auf Seite 8 ein Item (F114) so zu programmieren, dass wenn Option A (siehe Syntax) gewählt wird, dass dann eine weitere Frage (F115) eingeblendet wird, anderenfalls soll die Frage ausgeblendet bleiben. Mir wird keine Fehlermeldung angezeigt und trotzdem bleibt die Frage (F115) stets ausgeblendet.
Können Sie mir hier weiterhelfen und sagen, worin der Fehler besteht?

JavaScript Quellcode:

<script type="text/javascript">
<!--
var optionI = document.getElementById("F114_01a");  
var optionJ = document.getElementById("F114_02a");
var optionK = document.getElementById("F114_03a");  
var optionL = document.getElementById("F114_04a");
var optionM = document.getElementById("F114_05a");
var frage9 = document.getElementById("F115_qst"); 

function toogle6() {
  if ((optionI.checked)) {
      frage9.style.display = "none";
  } else {
    frage9.style.display = "";
  }
}
SoSciTools.attachEvent(optionI, "click", toogle6);
SoSciTools.attachEvent(optionJ, "click", toogle6);
SoSciTools.attachEvent(optionK, "click", toogle6);
SoSciTools.attachEvent(optionL, "click", toogle6);
SoSciTools.attachEvent(optionM, "click", toogle6);
toogle6();

function toogle7() {
  if ((optionJ.checked) && (optionK.checked) && (optionL.checked) && (optionM.checked)) {
      frage9.style.display = "";
  } else {
    frage9.style.display = "none";
  }
}
SoSciTools.attachEvent(optionI, "click", toogle7);
SoSciTools.attachEvent(optionJ, "click", toogle7);
SoSciTools.attachEvent(optionK, "click", toogle7);
SoSciTools.attachEvent(optionL, "click", toogle7);
SoSciTools.attachEvent(optionM, "click", toogle7);
toogle7();


// -->
</script>

Answer 1

Der Code funktioniert ... nur passiert da etwas, das Sie vielleicht nicht intendiert haben: Die Frage wird erst angezeigt und dann gleich wieder ausgeblendet.

Sie haben ja zwei Funktionen: toogle6und toogle7. Und wenn man auf eine Option klickt, werden beide aufgerufen. Die erste Funktion macht das, was Sie möchten.

Die toogle7 hingegen zeigt die Frage nur dann an, wenn gleichzeitig (&&) mehrere Optionen angeklickt sind, was ja nicht sein kann. Entsprechend wird die Frage gleich wieder ausgeblendet.

Lösung: Entfernen Sie alles ab function toogle7()

Answer 2

Hallo,

das Problem ist, dass sie hier zwei gegensätzliche Funktionen haben. Beim ersten Aufrufen der Seite wird F115 durch toggle6() eingeblendet (I ist nicht ausgewählt, und "" blendet die Frage ein). toggle7() blendet sie dann sofort wieder aus (J-M sind nicht alle zusammen ausgewählt, "none" blendet aus).

Das passiert jetzt jedes mal, wenn Sie eine Antwort auswählen, weil Sie immer beide Funktionen laufen lassen. Eine blendet ein, wenn Sie I auswählen, die andere blendet aus, weil alle anderen Optionen nicht zusammen ausgewählt sind.

Grundsätzlich reicht Ihnen toggle6() als Funktion, wenn Sie "" und "none" tauschen: Sie blenden ein, wenn I ausgewählt ist und in jedem anderen Fall aus. Sie können also alles ab toggle7() rausnehmen.

Liebe Grüße