Lukas Böhm: Wie würdet ihr an dieses Problem herangehen?

Hi!
Ich weiss nicht, wie ich an dieses Problem herangehen soll. Also:
Ich habe vor einiger Zeit eine Seite gesehen (URL habe ich leider vergessen), deren Aufbau in etwa so aussah:
------------------
|Überschrift 1   |
------------------

------------------
|Überschrift 2   |
------------------

------------------
|Überschrift 3   |
------------------

Wenn man dann auf "Überschrift 1" geklickt hat, dann ist eine Box aufgegangen, in der der Inhalt zur "Überschrift 1" stand.
Soweit würde ich es auch noch hinbekommen.
Aber dann wurde es m.E. nach kompliziert. Wenn dann auf "Überschrift 2" geklickt wurde, wurde die Box zu "Überschrift 1" geschlossen und der Text zu "Überschrift 2" wurde sichtbar.
Mein Problem ist jetzt, dass ich nicht weiss, welche Box wieder geschlossen werden muss. Schließlich kann ich dem User nicht die Reihenfolge vorschreiben, in der er auf die Überschriften klicken soll. Wie kann ich also abfragen, welche Box gerade offen ist und dann geschlossen werden soll und welche jetzt geöffnet werden soll.
Wie würdet ihr dieses Problem lösen? Ich bin dankbar für jede Hilfe!
szia, Lukas

  1. Hello out there!

    Mein Problem ist jetzt, dass ich nicht weiss, welche Box wieder geschlossen werden muss.

    Dann schließ doch alle.

    See ya up the road,
    Gunnar

    --
    “Remember, in the end, nobody wins unless everybody wins.” (Bruce Springsteen)
    1. Hi!
      Du meinst ich sollte alle schließen und dann explizit die Box wieder öffnen, die ich brauche?
      Das ist auch eine Möglichkeit. Ich probier das nachher gleich einmal aus. Vielen Dank!
      szia, Lukas

  2. Hallo!

    Wie kann ich also abfragen, welche Box gerade offen ist und dann geschlossen werden soll und welche jetzt geöffnet werden soll.

    Wenn du eine Box öffnest, merkst du dir diese in einer globalen Variable.
    Wenn du die nächste öffnest, schaust du ob in der globalen Variable etwas drinnen steht, dass darauf hindeudet, dass bereits eine Box offen ist. Wenn ja, dann schließe sie.

    Pseudocode:

    var lastOpenedBox=null;

    function openBox(box){
       if(!isNull(lastOpenedBox))
         closeBox(lastOpenedBox)

    box.open() ... oder was auch immer zu tun ist beim öffnen;

    lastOpenedBox=box;
    }

    mfg
      frafu

    1. Hi!
      Danke schön! Damit experimentier ich mal ein bisschen herum!
      szia, Lukas

    2. Hi!
      Ich habe das jetzt mal versucht umzusetzen, aber irgendwie klappt das noch nicht so ganz. Hier mal mein (jämmerlicher ;-)) Versuch:

      <html>
      <head>
       <title>Untitled</title>
      <link rel="STYLESHEET" type="text/css" href="css.css">
      <script type="text/javascript">
      var lastOpenedBox = null;
      function openBox(box){
          if(lastOpenedBox != null){
        closeBox(lastOpenedBox);
       }
       document.getElementById(box).style.display = "none";
          lastOpenedBox = box;
      }
      function closeBox(lastOpenedBox){
       document.getElementById(lastOpenedBox).style.display = "none";
      }
      </script>
      </head>

      <body>
      <div class="topic"><a href="#" onclick="openBox(text1)">1.</a></div>
      <div id="text1" class="text" style="display:none">
       1!Das sollte aufklappen!
      </div>

      <div class="topic"><a href="#" onclick="openBox(text2)">2.</a></div>
      <div id="text2" class="text" style="display:none">
       2!Das sollte aufklappen!
      </div>

      <div class="topic"><a href="#" onclick="openBox(text3)">3.</a></div>
      <div id="text3" class="text" style="display:none">
       3!Das sollte aufklappen!
      </div>

      <div class="topic"><a href="#" onclick="openBox(text4)">4.</a></div>
      <div id="text4" class="text" style="display:none">
       4!Das sollte aufklappen!
      </div>

      <div class="topic"><a href="#" onclick="openBox(text5)">5.</a></div>
      <div id="text5" class="text" style="display:none">
       5!Das sollte aufklappen!
      </div>
      </body>
      </html>

      Die JavaScript-Konsole meint, dass Box keine "properties" hat. Was muss ich machen, damit es funktioniert?
      Vielen Vielen Dank!
      szia, Lukas

      1. Hallo Lukas!

        <div class="topic"><a href="#" onclick="openBox(text1)">1.</a>

        ^    ^

        Fällt Dir auf, dass was fehlt?

        Viele Grüße aus Frankfurt/Main,
        Patrick

        --

        _ - jenseits vom delirium - _
        <hatehtehpehdoppelpunktslashslashwehwehwehpunktatomicminuseggspunktcomslash>
        1. Hello out there!

          <div class="topic"><a href="#" onclick="openBox(text1)">1.</a>
                                         ▲1                  ^    ^▲2
          Fällt Dir auf, dass was fehlt?

          Und zwar auch an der mit '▲1' markierten Stelle. Es sei denn, für Clients ohne JavaScript sind sämliche Inhalte immer _ein_geblendet. https://forum.selfhtml.org/?t=137314&m=892194

          Aber auch dann macht ein Sprung zum Seitenanfang wohl keinen Sinn.

          Und bei '▲2' sollte noch 'return false' stehen.

          See ya up the road,
          Gunnar

          --
          “Remember, in the end, nobody wins unless everybody wins.” (Bruce Springsteen)
          1. Hi!
            Danke schön ihr zwei! Ich habe es jetzt soweit, dass ich keine Fehlermeldungen mehr bekomme, aber es funktioniert noch nicht. Was muss ich denn noch anders machen?
            Vielen vielen Dank!
            szia, Lukas

            <html>
            <head>
             <title>Untitled</title>
            <link rel="STYLESHEET" type="text/css" href="css.css">
            <script type="text/javascript">
            var lastOpenedBox = null;
            function openBox(box){
                if(lastOpenedBox != null){
              closeBox(lastOpenedBox);
             }
             document.getElementById(box).style.display = "none";
                lastOpenedBox = box;
            }
            function closeBox(lastOpenedBox){
             document.getElementById(lastOpenedBox).style.display = "none";
            }
            </script>
            </head>

            <body>
            <div class="topic"><a href="#" onclick="openBox('text1');return false">1.</a></div>
            <div id="text1" class="text" style="display:none">
             1!Das sollte aufklappen!
            </div>

            <div class="topic"><a href="#" onclick="openBox('text2');return false">2.</a></div>
            <div id="text2" class="text" style="display:none">
             2!Das sollte aufklappen!
            </div>

            <div class="topic"><a href="#" onclick="openBox('text3');return false">3.</a></div>
            <div id="text3" class="text" style="display:none">
             3!Das sollte aufklappen!
            </div>

            <div class="topic"><a href="#" onclick="openBox('text4');return false">4.</a></div>
            <div id="text4" class="text" style="display:none">
             4!Das sollte aufklappen!
            </div>

            <div class="topic"><a href="#" onclick="openBox('text5');return false">5.</a></div>
            <div id="text5" class="text" style="display:none">
             5!Das sollte aufklappen!
            </div>
            </body>
            </html>

            PS: Das mit dem "#" in den Links mach ich noch raus!

            1. Hallo Lukas!

              Was muss ich denn noch anders machen?

              var lastOpenedBox = null;
              function openBox(box){
                  if(lastOpenedBox != null){
                closeBox(lastOpenedBox);
              }
              document.getElementById(box).style.display = "none";
                  lastOpenedBox = box;
              }
              function closeBox(lastOpenedBox){
              document.getElementById(lastOpenedBox).style.display = "none";
              }

              Ich sehe nur, dass beide Funktionen die display-Eigenschaft der Elemente, deren ID übergeben werden, auf "none" setzen. Und in Deinen inline-Styles sind sie auch auf "none" gesetzt. Von daher tut Deine Funktion am "Start"-Zustand nichts ändern, läuft aber ansonsten jetzt fehlerfrei :)

              PS: Das mit dem "#" in den Links mach ich noch raus!

              Ja. :)

              Viele Grüße aus Frankfurt/Main,
              Patrick

              --

              _ - jenseits vom delirium - _
              <hatehtehpehdoppelpunktslashslashwehwehwehpunktatomicminuseggspunktcomslash>
              1. Hi Patrick!
                Also ich habe jetzt eine Zeile eingefügt, die das Problem beheben soll. Doch dann kommt:
                ########
                document.getElementById(lastOpenedBox) has no properties
                ########

                Ich bin relativ ratlos, weil ich nicht weiß, wo der Fehler liegt. Hier ist der JavaScript-Code:
                ########
                var lastOpenedBox = null;
                function openBox(box){
                    if(lastOpenedBox != null){
                  closeBox(lastOpenedBox);
                 }
                 document.getElementById(box).style.display = "block";
                 document.getElementById(lastOpenedBox).style.display = "none";
                    lastOpenedBox = box;
                }
                function closeBox(lastOpenedBox){
                 document.getElementById(lastOpenedBox).style.display = "none";
                }
                ########

                Was ist jetzt noch falsch?
                Vielen Dank für deine Antworten!
                szia, Lukas
                PS: Ich habe gerade nocheinmal ein bisschen herumprobiert. Dabei kam das heraus:
                #######
                var lastOpenedBox = null;
                function openBox(box){
                    if(lastOpenedBox != null){
                  closeBox(lastOpenedBox);
                  document.getElementById(box).style.display = "block";
                  lastOpenedBox = box;
                 } else {
                 document.getElementById(box).style.display = "block";
                    lastOpenedBox = box;
                 }
                }
                function closeBox(lastOpenedBox){
                 document.getElementById(lastOpenedBox).style.display = "none";
                }
                #######

                Welches Script ist besser? Ich finde, dass das letzte besser ist, aber das kann ich nicht so gut beurteilen...
                Vielen Dank!
                szia, Lukas

                1. Hallo Lukas!

                  Das Beispiel, das Du da hattest, war schon ganz gut, und wenn du in der Funktion "openBox" die richtige display-Eigenschaft, erreichst Du das, was Du vorhattest.

                  Viele Grüße aus Frankfurt/Main,
                  Patrick

                  --

                  _ - jenseits vom delirium - _
                  <hatehtehpehdoppelpunktslashslashwehwehwehpunktatomicminuseggspunktcomslash>
                  1. Hi Patrick!
                    Vielen Dank für deine Hilfe jetzt hat es geklappt! Danke schön!
                    szia, Lukas

                2. PS: Ich habe gerade nocheinmal ein bisschen herumprobiert. Dabei kam das heraus:
                  #######
                  var lastOpenedBox = null;
                  function openBox(box){
                      if(lastOpenedBox != null){
                    closeBox(lastOpenedBox);
                    document.getElementById(box).style.display = "block";
                    lastOpenedBox = box;
                  } else {
                  document.getElementById(box).style.display = "block";
                      lastOpenedBox = box;
                  }
                  }

                  Das ist doch arg umständlich.
                  Du rufst hier insgesamt bis zu dreimal getElementById auf obwohl's nur einmal nötig wäre.

                    
                  var lastOpenedBox = null;  
                  function openBox(box_id)  
                  {  
                  if(lastOpenedBox) lastOpenedBox.style.display = 'none';  
                  lastOpenedBox = document.getElementById(box_id)  
                  lastOpenedBox .style.display = "block";  
                  }  
                  
                  

                  Struppi.

                  --
                  Javascript ist toll (Perl auch!)
          2. Hallo Gunnar!

            Aber auch dann macht ein Sprung zum Seitenanfang wohl keinen Sinn.

            Wobei Opera 9.01 bei a href="#" gar nicht mehr "springen tut"...

            Viele Grüße aus Frankfurt/Main,
            Patrick

            --

            _ - jenseits vom delirium - _
            <hatehtehpehdoppelpunktslashslashwehwehwehpunktatomicminuseggspunktcomslash>