Der Ultimative: script kürzen

Moin

So ich hab zwar schon ahnung von javascript aber profi bin ich leider auch noch nicht deswegen habe ich manche scripte natürlich umständlich und sehr groß deswegen wollt ich mal fragen ob mit einer verraten kann wie ich dieses script kürzen kann:

function index()
 {
  document.getElementById("divindex").style.visibility = "visible";
  document.getElementById("divmich").style.visibility = "hidden";
  document.getElementById("divfotos").style.visibility = "hidden";
  document.getElementById("divtest").style.visibility = "hidden";
  document.getElementById("divgaeste").style.visibility = "hidden";
  document.getElementById("divkontakt").style.visibility = "hidden";
  document.getElementById("divdownload").style.visibility = "hidden";
 }

function mich()
 {
  document.getElementById("divindex").style.visibility = "hidden";
  document.getElementById("divmich").style.visibility = "visible";
  document.getElementById("divfotos").style.visibility = "hidden";
  document.getElementById("divtest").style.visibility = "hidden";
  document.getElementById("divgaeste").style.visibility = "hidden";
  document.getElementById("divkontakt").style.visibility = "hidden";
  document.getElementById("divdownload").style.visibility = "hidden";
 }

function fotos()
 {
  document.getElementById("divindex").style.visibility = "hidden";
  document.getElementById("divmich").style.visibility = "hidden";
  document.getElementById("divfotos").style.visibility = "visible";
  document.getElementById("divtest").style.visibility = "hidden";
  document.getElementById("divgaeste").style.visibility = "hidden";
  document.getElementById("divkontakt").style.visibility = "hidden";
  document.getElementById("divdownload").style.visibility = "hidden";
 }

function test()
 {
  document.getElementById("divindex").style.visibility = "hidden";
  document.getElementById("divmich").style.visibility = "hidden";
  document.getElementById("divfotos").style.visibility = "hidden";
  document.getElementById("divtest").style.visibility = "visible";
  document.getElementById("divgaeste").style.visibility = "hidden";
  document.getElementById("divkontakt").style.visibility = "hidden";
  document.getElementById("divdownload").style.visibility = "hidden";
 }

function gaeste()
 {
  document.getElementById("divindex").style.visibility = "hidden";
  document.getElementById("divmich").style.visibility = "hidden";
  document.getElementById("divfotos").style.visibility = "hidden";
  document.getElementById("divtest").style.visibility = "hidden";
  document.getElementById("divgaeste").style.visibility = "visible";
  document.getElementById("divkontakt").style.visibility = "hidden";
  document.getElementById("divdownload").style.visibility = "hidden";
 }

function kontakt()
 {
  document.getElementById("divindex").style.visibility = "hidden";
  document.getElementById("divmich").style.visibility = "hidden";
  document.getElementById("divfotos").style.visibility = "hidden";
  document.getElementById("divtest").style.visibility = "hidden";
  document.getElementById("divgaeste").style.visibility = "hidden";
  document.getElementById("divkontakt").style.visibility = "visible";
  document.getElementById("divdownload").style.visibility = "hidden";
 }

function download()
 {
  document.getElementById("divindex").style.visibility = "hidden";
  document.getElementById("divmich").style.visibility = "hidden";
  document.getElementById("divfotos").style.visibility = "hidden";
  document.getElementById("divtest").style.visibility = "hidden";
  document.getElementById("divgaeste").style.visibility = "hidden";
  document.getElementById("divkontakt").style.visibility = "hidden";
  document.getElementById("divdownload").style.visibility = "visible";
 }

ne beispiel seite die ähnlich ist würde auch gehen wo ich mir was abschaun kann daraus lern ich immer am besten.

MfG

  1. Hi,

    wie wäre es mit folgendem:
    Ein Funktion versteckeAlle(), die alle visibility = "hidden" setzt, und dann nur die eine auf visible setzt:
    function download() {
       versteckeAlle();
       document.getElementById("divdownload").style.visibility = "visible";
    }

    MfG
    Rouven

    --

    -------------------
    ss:) zu:) ls:& fo:) de:< va:{ ch:? sh:) n4:( rl:? br:$ js:| ie:) fl:(
  2. Hallo.

    So ich hab zwar schon ahnung von javascript aber profi bin ich leider auch noch nicht deswegen habe ich manche scripte natürlich umständlich und sehr groß deswegen wollt ich mal fragen ob mit einer verraten kann wie ich dieses script kürzen kann:

    Von der Herangehensweise würde ich schauen, welcher Befehl sich wiederholt und was dabei variabel ist:

    document.getElementById("divindex").style.visibility = "visible";
      document.getElementById("divmich").style.visibility = "hidden";

    ergibt:
    document.getElementById(VARIABEL).style.visibility = VARIABEL;

    Ergo musst du eine Funktion haben, der du die zwei variablen Inhalte übergibst:

    function foo(ename, stil) {
      document.getElementById(ename).style.visibility = stil;
    }

    Diese Funktion kannst du dann ganz einfach mit den gewünschten Parametern aufrufen, z.B. so: foo(divindex, visible).

    Vielleicht hilft's
    Siechfred

    1. Hallo nochmal

      foo(divindex, visible)

      Das muss natürlich foo('divindex', 'visible') heißen.

      Siechfred

    2. function foo(ename, stil) {
        document.getElementById(ename).style.visibility = stil;
      }
      foo('divindex', 'visible').

      so jetzt gibt es noch ein problem wenn ich auf den button klicke wird das sichtbar aber ich will das alle anderen unsichbar werden also muß noch eine funktion rein die die anderen unsichbar macht wie nur wie ???

      MfG

      PS: ich bastel schon mal mal sehen ob ich ne lösung finde

      1. Hi

        Also folgende lösung hab ich schon mal gemacht die auch geht.
        ---------------------------------
        function foo(ename, stil)
        {
          document.getElementById("divindex").style.visibility = "hidden";
          document.getElementById("divmich").style.visibility = "hidden";
          document.getElementById("divfotos").style.visibility = "hidden";
          document.getElementById("divtest").style.visibility = "hidden";
          document.getElementById("divgaeste").style.visibility = "hidden";
          document.getElementById("divkontakt").style.visibility = "hidden";
          document.getElementById("divdownload").style.visibility = "hidden";
          document.getElementById(ename).style.visibility = stil;
        }
        ---------------------------------

        ist es möglich stadt für deses document.getElementById alles in eins zu kürzen ???

        z.B.:
        document.getElementById("divindex && divmich && divfotos && divtest && divgaeste && divkontakt && divdownload").style.visibility = "hidden";

        ich weiss nur nicht wie ich die mit und verbinden kann oder so.

        MfG

  3. Hallo,

    function download()
     {
      document.getElementById("divindex").style.visibility = "hidden";
      [...]
      document.getElementById("divkontakt").style.visibility = "hidden";
      document.getElementById("divdownload").style.visibility = "visible";
     }

    du hast immer die gleichen Kategorien(?) von denen immer eine eingeblendet werden soll, und alle anderen ausgeblendet. Da könntest du alle vorhandenen IDs in ein Array schreiben, dieses Array dann durchlaufen und alle auf unsichtbar setzen. Der Funktion wird dann immer eine Variable übergeben, und das Element mit dieser ID wird dann eingeblendet (entweder in der Schleife oder dannach):

    function foo(zuzeigendeid){
      var ids = new Array('divindex','divmich','divfoto','divtest','divgaeste','divkontakt','divdownload');
      for(var i=0;i<ids.length;i++){
        document.getElementById(ids[i]).style.visibility = ids[i]==zuzeigendeid?'visible':'hidden';
      }
    }

    dabei bewirkt "ids[i]==zuzeigendeid?'visible':'hidden';", dass der Eigenschaft visibility der Wert 'visible' zugewiesen wird, wenn ids[i] gleich der übergebenen (einzublendenden) ID ist, ansonsten bekommt sie den Wert 'hidden'.

    aufgerufen wird das ganze einfach mit: foo('divdownload'); (das entspricht deiner Funktion download())

    Grüße aus Nürnberg
    Tobias

    --
    Selfcode: sh:( fo:) ch:? rl:( br:< n4:& ie:% mo:| va:) de:] zu:) fl:( ss:| ls:[ js:|
    1. Moin

      BIG THX

      Auf die lösung wäre ich nie gekommen ich vrstehe zwar immer die scripte nur den weg wie man auf die kommt verstehe ich irgend wie kaum :(

      Naja irgend wann macht es hoffendlich auch bei mir mal klick :D

      Danke noch mal.

      MfG

      PS: die näste frage kommt nur wann weiss ich noch nicht :D

    2. Klasse!

      function foo(zuzeigendeid){
        var ids = new Array('divindex','divmich','divfoto','divtest','divgaeste','divkontakt','divdownload');
        for(var i=0;i<ids.length;i++){
          document.getElementById(ids[i]).style.visibility = ids[i]==zuzeigendeid?'visible':'hidden';

      Jetzt haben wir uns schrittweise genähert:

      1. ich schlug eine Funktion zum zentralen ausblenden vor
      2. jemand anders schlug eine Funktion für das getElementById in Kombination mit Variablen vor
      3. jetzt du noch mit dem Array und dem ?:-IF

      Meinst du, wir kriegen es noch kleiner? ;-)

      MfG
      Rouven

      --

      -------------------
      ss:) zu:) ls:& fo:) de:< va:{ ch:? sh:) n4:( rl:? br:$ js:| ie:) fl:(