Element ein-, ausblenden

[Detlef G.]

Hallo Insomnia

ich wünsche dir einen schönen Samstag.

Den wünsche ich dir auch.

Ganz genau kann ich dir das sagen, wenn du mir folgendes noch mal verdeutlichst.

if (aktion != 'aus')

Mir ist nicht klar, woher „aktion“ weiss was „aus“ sein soll… wir haben „aktion“ doch nichts darüber gesagt. Woher weiss „if“ dann also was –nicht- zutrifft.

Doch, wir sagen dies, allerdings nicht innerhalb der Funktion sondern beim Aufruf, genau so, wie wir auch nicht innerhalb der Funktion sagen, was myId enthalten soll, sondern beim Aufruf die Id des Elements angeben, das geändert werden soll.
Dazu schauen wir uns noch einmal die Funktionsdefinition an:

function block_ein_aus (myId, aktion)

Wir definieren zwei Variablen „myId” und „aktion”, die beim Start der Funktion jeweils den Wert enthalten, den wir beim Aufruf dieser als Parameter angegeben haben.

Oder ist es so, dass „aus“ gar nicht klar definiert werden muss, da es erst hierdurch sein "wissen" erhält…

Nein, wir rufen die Funktion mit zwei Parametern auf. Der erste (myId) sagt ihr, welches Element ein- oder ausgeblendet werden soll, der zweite Parameter (aktion) was sie tun soll, also entweder „ein” für Einblenden oder „aus” für Ausblenden.

Wenn der Aufruf der Funktion also so aussieht box_ein_aus ('info','aus'), dann enthält die Variable „myId” den Wert 'info' und die Variable „aktion” den Wert 'aus'.
Rufen wir sie mit box_ein_aus ('info','ein') auf, dann enthält „aktion” den Wert 'ein'.

Mit document.getElementById (myId) wird ein Element im Dokument gesucht, dessen Id mit dem in myId gespeicherten Wert (in dem Falle 'info') übereinstimmt, den wir beim Aufruf übergeben haben.
Mit if (aktion != 'aus') überprüfen wir dann, ob „aktion” nicht 'aus' enthält, also ob wir beim Aufruf der Funktion als zweiten Parameter etwas anderes als 'aus' übergeben haben.

Weißt du was ich meine? Also um es noch mal auf dem Punkt zu bringen: Woher weiss „aus“ für was es steht.

„aus” weiß das nicht. Wir haben festgelegt, dass wir „aus” als zweiten Parameter übergeben, wenn ausgeblendet werden soll. Wir hätten dafür auch „huggeldipumucje” festlegen können, nur wird man bei Verwendung des Scripts dann wohl jedesmal nachschlagen müssen, da erschien mir „aus” weitaus passender. ;)

Gut ich werde jetzt versuchen, das ganze Script und die Teile sinnvoll zusammen zu bringen.

Unser Script:

function block_ein_aus (myId, aktion) {

if (document.getElementById) {
      var el = document.getElementById (myId);
         if (el && el.style) {
         }
            if (aktion != 'aus') {
               el.style.display = 'block';

} else {

el.style.display = 'none';
            }
   }
}

>   
>   
> Dazu möchte ich noch sagen, dass ich unschlüssig bin, ob die erste `„if“`{:.language-javascript} Abfrage vor der nächsten geschlossen werden sollte… ich hab mich dafür entschieden, da es für mich in diesem Zusammenhang Sinn macht eine Frage zu stellen, diese zu klären und dann abzuschließen, bevor ich mich der nächsten zuwende.  
  
Wenn der Block, der durch die geschweiften Klammern nach der Abfrage gebildet wird, nichts enthält, dann könnten wir uns die Abfrage auch gleich sparen, das if `(el && el.style)`{:.language-javascript} wäre praktisch wirkungslos.  
Die Funktion würde zwar auch so funktionieren. Sollte aber einmal kein Elemente mit der übergebenen Id existieren oder irgendein Browser keine Styles unterstützen, dann würde das Script mit einem Fehler abgebrochen.  
Es könnte z.B. passieren, dass jemand schon auf „Einblenden” klickt, wenn der Rest des Dokuments noch nicht fertig geladen ist, und deshalb das Element mit der entsprechenden Id noch nicht existiert.  
  
Das Script sieht bis jetzt dann also so aus:  
  
~~~javascript
function block_an_aus (myId, aktion) {  
  if (document.getElementById) {              // kennt der Browser dies  
    var el = document.getElementById (myId);  // Referenz auf das Element holen und in el speichern  
      if (el && el.style) {                   // hat das geklappt und kennt el style, dann  
        if (aktion != 'aus') {                // wurde nicht "aus" übergeben, dann  
          el.style.display = 'block';         // display auf block setzen (Einblenden)  
        } else {                              // ansonsten  
          el.style.display = 'none';          // display auf none setzen (Ausblenden)  
        }  
      }  
    }  
  }  
}  

Falls noch Unklarheiten sind, dann frage noch einmal nach.

Wenn du bis hierher alles verstanden hast, dann können wir uns überlegen, wie wir die Funktion dahingehend erweitern können, dass wir nicht nur eine Id sondern eine Liste mit mehreren Ids übergeben können, um dann mehrere Elemente gleichzeitig ein- oder auszublenden.

Auf Wiederlesen
Detlef