Frage einblenden (Mehrfachauswahl)

Question

Guten Tag,
ich habe eine Frage vom Typ "Mehrfachauswahl" mit 3 Optionen, wobei die 3. Option "exklusiv" ist.
Wenn mind. 1 der beiden ersten Optionen ausgewählt wird, soll sich eine weitere Frage (Textfeld) aufklappen. Bei Auswahl der 3. Option soll nichts passieren. Ich habe das ganze mit Javascript umgesetzt, aber so ganz funktioniert es nicht. Wenn ich die 1. Option auswähle, öffnet sich wie geplant wie weitere Frage. Klicke ich dann die 3. Option, schließt sich die Frage wieder. So weit so gut. Wenn ich dann allerdings wieder die 1. (oder auch die 2.) Option anklicke, passiert nichts. Ich muss sie 2 Mal anklicken (also Häkchen raus, dann wieder rein), damit sich die weitere Frage wieder öffnet. Hier mein Code:

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

    var buttonMed01=  document.getElementById("C058_01");
    var buttonMed02=  document.getElementById("C058_02");
    var buttonMed03=  document.getElementById("C058_03");
    var textMed= document.getElementById("C054_01");

    var textBlockMed = document.getElementById("blockMed");  // Das DIV

  function blenden() {
     
    if (buttonMed03.checked) {
         textBlockMed.style.display = "none";
         textMed.value=""; 
      } else if (buttonMed01.checked || buttonMed02.checked)  {
        textBlockMed.style.display = "";
      } 
       else  {
         textBlockMed.style.display = "none";
         textMed.value="";
    }
}

    buttonMed01.onclick=blenden;
    buttonMed02.onclick=blenden;
    buttonMed03.onclick=blenden;
    blenden();   

    </script>

Könnt ihr mir weiterhelfen und mir sagen, wo der Fehler liegt?
Danke und viele Grüße
Katta

Answer 1

Das onclick reagiert eahrscheinlich einfach zu schnell - und zwar noch bevor der JavaScript-Code im Hintergrund die überflüssige Kreuzchen entfernt oder eben andersherum.

Probieren Sie es hiermit. Benennen Sie Ihre Funktion blenden mal um in echtBlenden und darunter:

function blenden() {
    window.setTimeout(echtBlenden, 300);
}

Comments

Vielen Dank! Aber es funktioniert leider nicht. Jetzt ist die Funktion blenden laut Fehlermeldung nicht definiert. Der Code sieht jetzt folgendermaßen aus:

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

    var buttonMed01=  document.getElementById("C058_01");
    var buttonMed02=  document.getElementById("C058_02");
    var buttonMed03=  document.getElementById("C058_03");
    var textMed= document.getElementById("C054_01");

    var textBlockMed = document.getElementById("blockMed");  // Das DIV

  function echtblenden() {

   function blenden() {
    window.setTimeout(echtBlenden, 300); }
     
    if (buttonMed03.checked) {
         textBlockMed.style.display = "none";
         textMed.value="";
      } else if (buttonMed01.checked || buttonMed02.checked)  {
        textBlockMed.style.display = "";
      }
       else  {
         textBlockMed.style.display = "none";
         textMed.value="";
    }
}

    buttonMed01.onclick=blenden;
    buttonMed02.onclick=blenden;
    buttonMed03.onclick=blenden;
    blenden();   

    </script>

Was mache ich falsch? Nochmal Danke!
Viele Grüße

---

Sie haben die Funktion blenden() in die andere Funktion gesetzt - sie gehören auf dieselbe Hierarchiestufe nebeneinander.

function echtblenden() {
    if (buttonMed03.checked) {
         textBlockMed.style.display = "none";
         textMed.value="";
      } else if (buttonMed01.checked || buttonMed02.checked)  {
        textBlockMed.style.display = "";
      }
       else  {
         textBlockMed.style.display = "none";
         textMed.value="";
    }
}

function blenden() {
    window.setTimeout(echtBlenden, 300);
}