Fragen bei Auswahl einer bestimmten Option sofort einblenden/ausblenden Java-Script

Question

Guten Tag,
ich hoffe ihr habt alle die Feiertage genießen können und Energie getankt.
Ich komme leider nicht mehr voran, ich versuche seit einer Weile schon mehrere "sofort" Einblendungen mittels Java gleich zu schalten. Die einzelnen Scripte funktionieren aber gemeinsam klappt es nicht.

Also was ich erreichen möchte:
Wenn bei Frage x die Person "ja" ankreuzt soll sofort eine Frage eingeblendet werden, ansonsten nicht. --> das funktioniert wunderbar
Nun soll bei der neu eingeblendeten Frage (x2) erneut eine sofort Einblendung gemacht werden und zwar, wenn eine Person bei der Frage x2 "ja" oder "vielleicht" ankreuzt, dann soll Textfeld (t) angezeigt werden ansonsten nicht. --> dieser Teil funktioniert auch alleine aber mit dem anderen leider nicht.

Hier meine beiden Java-Scripts:
Erser Teil

<script type="text/javascript">
<!--
var optionA = document.getElementById("AM09_01a");  
var optionB = document.getElementById("AM09_02a"); 
var frage = document.getElementById("AM10_qst");  
 
function toogle() {
  if (optionA.checked) {  
    frage.style.display = "";
  } else {
    frage.style.display = "none";
  }
}
 
SoSciTools.attachEvent(optionA, "click", toogle);
SoSciTools.attachEvent(optionB, "click", toogle);
toogle();
</script>

zweiter Teil:

<script type="text/javascript">
<!--
var optionA = document.getElementById("AM10_01a");  
var optionB = document.getElementById("AM10_02a");
var optionC = document.getElementById("AM10_03a");
var frage = document.getElementById("AM05_qst");  
 
function toogle() {
  if (optionA.checked || optionB.checked) {  
    frage.style.display = "";
  } else {
    frage.style.display = "none";
  }
}
 
SoSciTools.attachEvent(optionA, "click", toogle);
SoSciTools.attachEvent(optionB, "click", toogle);
SoSciTools.attachEvent(optionC, "click", toogle);
toogle();
</script>

Ich bedanke mich schon mal für die Hilfe!!!
Ansonsten noch einen guten Rutsch ins neue Jahr!!!!

Answer 1

Das Problem ist, dass das zweite JavaScript (nicht Java - trotz des ähnlichen Namens ist das etwas ganz anderes) die Variablen und die Funktion des ersten Scripts überschreibt, wenn beides auf derselben Seite steht.

Die Lösung ist einfach: Nennen Sie die Variablen optionA bis optionC und die Funktion toogle beim zweiten Mal um, z.B. in option2A etc.:

<script type="text/javascript">
<!--
var option1A = document.getElementById("AM09_01a");  
var option1B = document.getElementById("AM09_02a"); 
var frage1 = document.getElementById("AM10_qst");  
 
function toogle1() {
  if (option1A.checked) {  
    frage1.style.display = "";
  } else {
    frage1.style.display = "none";
  }
}
 
SoSciTools.attachEvent(option1A, "click", toogle1);
SoSciTools.attachEvent(option1B, "click", toogle1);
toogle1();

var option2A = document.getElementById("AM10_01a");  
var option2B = document.getElementById("AM10_02a");
var option2C = document.getElementById("AM10_03a");
var frage2 = document.getElementById("AM05_qst");  
 
function toogle2() {
  if (option2A.checked || option2B.checked) {  
    frage2.style.display = "";
  } else {
    frage2.style.display = "none";
  }
}
 
SoSciTools.attachEvent(option2A, "click", toogle2);
SoSciTools.attachEvent(option2B, "click", toogle2);
SoSciTools.attachEvent(option2C, "click", toogle2);
toogle2();
</script>

Es ginge prinzipiell auch etwas eleganter (Kapselung in Objekte und Instanzen), aber das führt hier zu weit.

Comments

WOW !!!
Danke für die super super schnelle Hilfe!!!

---

Hi,
noch mal meine Wenigkeit. Sorry, dass ich so störe...
Also eine daranknüpfende Frage:
Wie funkutioniert es, wenn jemand nun eine Eingabe ins Textfeld macht, dass die nächste Frage erscheint?
Dann wäre das "click" doch zuersetzen durch "type" (oder ähnliches) oder?
und wie verhält sich die "option" dazu, also ist es dann theoretisch "variable_tab" (aus dem Quelltext entnommen) oder eine andere?
Danke, ihr seid echt der beste Support den ich jemals gesehen habe! macht weiter so!

---

Danke für das Lob :) Das passender JavaScript-Event für einen Tastendruck wäre "keyup". Überprüfen müssten Sie dann in der Funktion, ob der Inhalt (.value) des Eingabefelds (oder Sie das nun input oder option nennen, ist egal) leer ist, also z.B (inputA.value == "").

---

Erstmal vielen vielen Dank für den überragenden Support!
Ich habe es nun probiert und stoße erneut auf ein Problem, welches ich nicht lösen kann.
Und zwar: Ist die Frage (AM06_qst) die eigentlich erst eingeblendet werden soll, von anfang an zu sehen und nicht wie bei den anderen erstmal versteckt, habe vieles rumprobiert mit den befehlen ".input", ".appear" usw. aber leider klappt es nicht ich stelle mal den Code rein: --> es geht hierbei um den toogle3

<script type="text/javascript">
<!--
var option1A = document.getElementById("AM09_01a");  
var option1B = document.getElementById("AM09_02a");
var frage1 = document.getElementById("AM10_qst");  
 
function toogle1() {
  if (option1A.checked) {  
    frage1.style.display = "";
  } else {
    frage1.style.display = "none";
  }
}
 
SoSciTools.attachEvent(option1A, "click", toogle1);
SoSciTools.attachEvent(option1B, "click", toogle1);
toogle1();

var option2A = document.getElementById("AM10_01a");  
var option2B = document.getElementById("AM10_02a");
var option2C = document.getElementById("AM10_03a");
var frage2 = document.getElementById("AM05_qst");  
 
function toogle2() {
  if (option2A.checked || option2B.checked) {  
    frage2.style.display = "";
  } else {
    frage2.style.display = "none";
  }
}
 
SoSciTools.attachEvent(option2A, "click", toogle2);
SoSciTools.attachEvent(option2B, "click", toogle2);
SoSciTools.attachEvent(option2C, "click", toogle2);
toogle2();

var option3A = document.getElementById("AM05_01");
var frage3 = document.getElementById("AM06_qst");

function toogle3() {
  if (option3A.value == "") {
    frage3.style.display = "none";
  } else {
    frage3.style.display = "";
  }
}
 
SoSciTools.attachEvent(option3A, "keyup", toogle3);
Toogle3();

</script>

---

Nur eine Kleinigkeit: Ihre dritte Funktion heißt toogle3(), aber Ihr Aufruf am Ende lautet Toogle3() - sind ist aber dank Groß-/Kleinschreibung nicht dasselbe. Solche Fehler sind übrigens mit der JavaScript-Konsole leichter zu finden: https://www.soscisurvey.de/help/doku.php/de:create:javascript#fehler_finden