Timo: Untermenüs bei Radio-Buttons verschwinden nicht.

Hallo liebe Leute,

Folgend mein Quellcode zum besseren verstehen:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
 <title>Untitled</title>
</head>
<script type="text/javascript">
function zusatzdaten(chk)
   {
     var fs = document.getElementById('zusatzdaten_' + chk.id);
     fs.style.display = (chk.checked) ? '' : 'none';
   }
</script>
<body>
<u>Radio-Punkt 1:</u><br>
<input type="radio" name="periodenart" id="periode1" value="1" onclick="zusatzdaten(this);"><br>
   <fieldset id="zusatzdaten_periode1" style="display:none;">
   Zusatzeingaben zu Punkt 1<br>
   </fieldset>
<hr>
<u>Radio-Punkt 2:</u><br>
<input type="radio" name="periodenart" id="periode2" value="1" onclick="zusatzdaten(this);"><br>
   <fieldset id="zusatzdaten_periode2" style="display:none;">
   Zusatzeingaben zu Punkt 2<br>
   </fieldset>
</body>
</html>

Es werden zwei Radio-Punkte dargestellt, die ein Untermenü öffnen, sobald man sie anklickt. Mein Problem ist, dass dieses Untermenü nicht wieder ausgeblendet wird, wenn man sich umentscheidet und doch den anderen Radio-Punkt anwählt.

Also "eigentlich" möchte ich gerne, dass es nur ein einziges Untermenü zur Zeit gibt. Und wenn man halt einen anderen Punkt anwählt, das erste Menü wieder zu geht.

Aktuell bleibt es stehen und man kann beide Untermünus gleichzeitig einsehen.

Was gibt es jetzt für Möglichkeiten, wie kann ich das Lösen?

Vielen Dank für Hilfreiche Tipps

Timo

  1. Es werden zwei Radio-Punkte dargestellt, die ein Untermenü öffnen, sobald man sie anklickt. Mein Problem ist, dass dieses Untermenü nicht wieder ausgeblendet wird, wenn man sich umentscheidet und doch den anderen Radio-Punkt anwählt.

    Dann setze alle eingeblendeten Untermenüs auf unsichtbar, bevor du das vom user gewählte einblendest. Man könnte das bspw. über ein flag lösen, in dem die id des letzten eingeblendeten Menüs gespeichert wird. Also sowas:

    var currentRadio = '';
    function displaySubmenu(elm) {
      if(elm.checked) {
        var submenu = document.getElementById('zusatzdaten_' + elm.id);
        if(currentRadio != '') { currentRadio.style.display = 'none'; }
        currentRadio = elm;
        submenu.style.display = '';
    }

    ~JJ

    1. var currentRadio = '';

      und

      if(currentRadio != '') { currentRadio.style.display = 'none'; }

      ist natürlich Schwachsinn, so währe es richtig:

      var currentRadio;

      und

      if(currentRadio) { currentRadio.style.display = 'none'; }

    2. Hi JJ,

      wenn ich das jetzt richtig verstanden habe, soll der id-Wert in einer Variable gespeichert werden. Wenn der User dann auf einen anderen Radio-Button klickt, wird zunächst zu dem gespeichterten id-Wert das Menü wieder ausgeblendet, bevor dann das neue Menü eingeblendet wird.

      Ich habe Deinen Code mal übernommen und in "meinen gewohnten Stil" abgeändert.

      var currentRadio = '';
      function displaySubmenu(elm)
         {
         if (elm.checked)
            {
            var submenu = document.getElementById('zusatzdaten_' + elm.id);
            if (currentRadio != '')
               {
               currentRadio.style.display = 'none';
               }
            currentRadio = elm;
            submenu.style.display = '';
         }

      Kann es sein dass da eine "}" fehlt?
      Mein Compiler meckert da rum.
      Ich muss dazu sagen, dass ich mich mit JavaScript überhaupt nicht auskenne.
      Ich bin eher ein PHP-Macher.

      Muss ich nicht zusätzlich jetzt in den jeweiligen Untermenüs die id in "currentRadio" speichern ($currentRadio="periode1") in BEzug auf meinen angegebenen Code?

      Gruß Timo

      1. wenn ich das jetzt richtig verstanden habe, soll der id-Wert in einer Variable gespeichert werden.

        Nee, das aktuelle Objekt, ich hab mich da falsch ausgedrückt. Siehe mein 2. Posting unter deinem.

        Kann es sein dass da eine "}" fehlt?

        Jepp, sieht so aus.

        Muss ich nicht zusätzlich jetzt in den jeweiligen Untermenüs die id in "currentRadio" speichern ($currentRadio="periode1") in BEzug auf meinen angegebenen Code?

        Das macht`s doch automatisch mit "currentRadio = elm;"

        1. Sorry, aber irgendwie stehe ich gerade auf der Leitung
          ich hab das ganze jetzt folgendermaßen:

          <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
          <html>
          <head>
           <title>Testumgebung</title>
          </head>
          <script type="text/javascript">
          var currentRadio;
          function displaySubmenu(elm)
             {
             if(elm.checked)
               {
               var submenu = document.getElementById('zusatzdaten_' + elm.id);
               if(currentRadio)
                 {
                 currentRadio.style.display = 'none';
                 }
             /**/
             currentRadio = elm;
             submenu.style.display = '';
             /**/
             }
          function zusatzdaten(chk)
             {
             var fs = document.getElementById('zusatzdaten_' + chk.id);
             fs.style.display = (chk.checked) ? '' : 'none';
             }
          </script>
          <body>
          <u>Radio-Punkt 1:</u><br>
          <input type="radio" name="periodenart" id="periode1" value="1" onclick="zusatzdaten(this);"><br>
             <fieldset id="zusatzdaten_periode1" style="display:none;">
             Zusatzeingaben zu Punkt 1<br>
             </fieldset>
          <hr>
          <u>Radio-Punkt 2:</u><br>
          <input type="radio" name="periodenart" id="periode2" value="1" onclick="zusatzdaten(this);"><br>
             <fieldset id="zusatzdaten_periode2" style="display:none;">
             Zusatzeingaben zu Punkt 2<br>
             </fieldset>
          </body>
          </html>

          1.)Er meckert immer noch wegen der vermissten "}" - wo fehlt die?
          2.)Ich habe an zwei Orten -> /**/ die "}" eingesetzt. Funzt aber trotzdem nicht.

          Vielen Dank für die Gedult
          Gruß Timo

          1. Mahlzeit Timo,

            1.)Er meckert immer noch wegen der vermissten "}" - wo fehlt die?

            Im Javascript-Code. Im Ernst: rücke vernünftig ein, dann wirst Du es sofort sehen.

            2.)Ich habe an zwei Orten -> /**/ die "}" eingesetzt. Funzt aber trotzdem nicht.

            "Try and error" ist bei Strukturproblemen im Code keine gute Idee.

            MfG,
            EKKi

            --
            sh:( fo:| ch:? rl:( br:> n4:~ ie:% mo:} va:) de:] zu:) fl:{ ss:) ls:& js:|
          2. var currentRadio;
            function displaySubmenu(elm)
               {
               if(elm.checked)
                 {
                 var submenu = document.getElementById('zusatzdaten_' + elm.id);
                 if(currentRadio)
                   {
                   currentRadio.style.display = 'none';
                   }
               /**/
               currentRadio = elm;
               submenu.style.display = '';
               /**/
               }

            So funzt es:

            function displaySubmenu(elm)
               {
               if(elm.checked)
                 {
                 var submenu = document.getElementById('zusatzdaten_' + elm.id);
                 if(currentRadio)
                   {
                   currentRadio.style.display = 'none';
                   }
                 // Hier ist noch ein Fehler gewesen
                 // currentRadio = elm;
                 // so wär`s richtig:
                 currentRadio = submenu;
                 submenu.style.display = '';
                 }
               }
            Vergiß nicht, die onclicks anzupassen, da steht noch "zusatzdaten".

            1. Vergiß nicht, die onclicks anzupassen, da steht noch "zusatzdaten".

              Ja krass, jetzt gäda - wunderbar.

              Vielen Dank nochmal für Deine Gedult und Hilfe

              Jetzt mache ich mich mal an den Feinschliff

              Gruß Timo

          3. Hi Timo!

            Sorry, aber irgendwie stehe ich gerade auf der Leitung

            Das merkt man.
            Du musst in einer Schleife über alle Input-Elemente des Typs "radio" gehen.

            function showCheckedZusatzdaten() {  
              // Alle Input-Elemente in ein Array speichern  
              var inputs = document.getElementsByTagName("input");  
              for(i=0;i<inputs.length;i++) // Schleife über alle Inputs  
                if(inputs[i].type=='radio') // Nur die Radio-Buttons bearbeiten...  
                  document.getElementById('zusatzdaten_' + inputs[i].id).style.display = (inputs[i].checked) ? 'block' : 'none';  
                  // ...und wenn sie nicht ausgewählt sind, ausblenden.  
            }
            

            Schwer? =)

            MfG H☼psel

            --
            "It's amazing I won. I was running against peace, prosperity, and incumbency."
            George W. Bush speaking to Swedish Prime Minister unaware a live television camera was still rolling, June 14, 2001
            Selfcode: ie:% fl:( br:> va:) ls:& fo:) rl:? n4:& ss:| de:] js:| ch:? sh:( mo:) zu:)
            1. Du musst in einer Schleife über alle Input-Elemente des Typs "radio" gehen.

              Nö, muß er nicht, denn das flag wie vorgeschlagen sorgt dafür, daß immer nur eine Zusatzinfo eingeblendet ist. Bei vielen Radiobuttons wäre mein Vorschlag performanter, würd ich meinen.

              document.getElementById('zusatzdaten_' + inputs[i].id).style.display = (inputs[i].checked) ? 'block' : 'none';
                    // ...und wenn sie nicht ausgewählt sind, ausblenden.

              Wegen der Kompatibilität würde ich statt 'block' nur '' nehmen, das setzt den Anzeigewert auf den Standard zurück.

              ~JJ

              1. Hi Jaroslav!

                Du musst in einer Schleife über alle Input-Elemente des Typs "radio" gehen.
                Nö, muß er nicht, denn das flag wie vorgeschlagen sorgt dafür, daß immer nur eine Zusatzinfo eingeblendet ist. Bei vielen Radiobuttons wäre mein Vorschlag performanter, würd ich meinen.

                Ohne Zweifel. Ich würde diese Variante auch bevorzugen.

                Wegen der Kompatibilität würde ich statt 'block' nur '' nehmen, das setzt den Anzeigewert auf den Standard zurück.

                Welche(r) Browser haben denn mit display:none Probleme?

                MfG H☼psel

                --
                "It's amazing I won. I was running against peace, prosperity, and incumbency."
                George W. Bush speaking to Swedish Prime Minister unaware a live television camera was still rolling, June 14, 2001
                Selfcode: ie:% fl:( br:> va:) ls:& fo:) rl:? n4:& ss:| de:] js:| ch:? sh:( mo:) zu:)
                1. Mahlzeit Hopsel,

                  Wegen der Kompatibilität würde ich statt 'block' nur '' nehmen, das setzt den Anzeigewert auf den Standard zurück.
                  Welche(r) Browser haben denn mit display:none Probleme?

                  Darum geht's nicht. Es geht um '' statt 'block' (was ja nicht auf alle Elemente zutrifft!) ...

                  MfG,
                  EKKi

                  --
                  sh:( fo:| ch:? rl:( br:> n4:~ ie:% mo:} va:) de:] zu:) fl:{ ss:) ls:& js:|
                  1. Hi EKKi!

                    Wegen der Kompatibilität würde ich statt 'block' nur '' nehmen, das setzt den Anzeigewert auf den Standard zurück.
                    Welche(r) Browser haben denn mit display:none Probleme?
                    Darum geht's nicht. Es geht um '' statt 'block' (was ja nicht auf alle Elemente zutrifft!) ...

                    Ich habe die Tomaten jetzt weggeschmissen. Das Brett schützt meine Augen doch besser vor der Sonne.

                    MfG H☼psel

                    --
                    "It's amazing I won. I was running against peace, prosperity, and incumbency."
                    George W. Bush speaking to Swedish Prime Minister unaware a live television camera was still rolling, June 14, 2001
                    Selfcode: ie:% fl:( br:> va:) ls:& fo:) rl:? n4:& ss:| de:] js:| ch:? sh:( mo:) zu:)
  2. Mahlzeit Timo,

    Was gibt es jetzt für Möglichkeiten, wie kann ich das Lösen?

    In Deinem ursprünglichen Thread bleiben wäre schon mal ein guter Anfang. Du siehst, dass das Problem "Doppelposting" mit jedem weiteren Thread, den Du zu diesem Thema eröffnest, nicht gerade kleiner wird ... irgendwann weiß KEINER der Leute, die Dir irgendwann mal dazu geantwortet haben, mehr, worum es eigentlich gerade geht, was Du nun schon alles beherzigst bzw. ausprobiert hast usw. ...

    Also - in Deinem eigenen Interesse: unterlasse bitte zukünftig Doppelpostings!

    MfG,
    EKKi

    --
    sh:( fo:| ch:? rl:( br:> n4:~ ie:% mo:} va:) de:] zu:) fl:{ ss:) ls:& js:|
    1. Also - in Deinem eigenen Interesse: unterlasse bitte zukünftig Doppelpostings!

      Okay, sorry.
      Ich war mir nicht sicher wie sich des verhält, weil ich im anderen Thread über na lange weile garkeine Antworten mehr bekommen habe.
      Das nächste mal warte ich dann einfach noch ne Stunde länger, oder wie soll man sich dann verhalten?

      Gruß Timo

      1. Ich war mir nicht sicher wie sich des verhält, weil ich im anderen Thread über na lange weile garkeine Antworten mehr bekommen habe.

        geduld ist eine tugend, hat meine oma immer gesagt

        Das nächste mal warte ich dann einfach noch ne Stunde länger, oder wie soll man sich dann verhalten?

        warten - alle die hier ihre hilfe anbieten, machen das freiwillig in ihrer freizeit oder ihrer mittagspause - die meisten warten hier nicht mit den fingern im anschlag (und gleichzeitig auf F5-hämmernd) um bei einer antwort sofort zu reagieren

        je mehr du mithilfst, um ein problem zu lösen, desto schneller kann dir geholfen werden - die tipps für fragende hast du sicher gelesen

        1. OK, alles klar ;)

          ...kommt nicht wieder vor

      2. Mahlzeit Timo,

        Ich war mir nicht sicher wie sich des verhält, weil ich im anderen Thread über na lange weile garkeine Antworten mehr bekommen habe.

        Welchen "anderen Thread" meinst Du (es gibt zu diesem einen Thema mittlerweile derer drei ... q.e.d.)? Und was ist für Dich "na lange Weile"?

        Das nächste mal warte ich dann einfach noch ne Stunde länger, oder wie soll man sich dann verhalten?

        Einfach selbst nochmal nachfragen, wenn noch konkrete Fragen bzw. Probleme bestehen? In Deinem ursprünglichen Thread z.B. ist in alle Verzweigungen das letzte Posting nicht von Dir, dürfte also eine Antwort oder ein Tipp sein ... falls Du zu einem der Postings weitere Nachfragen hast, kannst Du da doch bestens ansetzen - wo ist das Problem?

        MfG,
        EKKi

        --
        sh:( fo:| ch:? rl:( br:> n4:~ ie:% mo:} va:) de:] zu:) fl:{ ss:) ls:& js:|