Olli: funktion wird nicht komplett ausgeführt...

Hallo,

Hoffe ihr könnt mir mit der folgenden Funktion helfen. Das Problem ist nicht "was" sie macht, sondern dass sie anscheinend nicht komplett ausgeführt wird. Hier erstmal die funktion:

<script type="text/javascript">
<!--
function einblenden(elementname){
if(elementname != '1'){
document.getElementById('1').style.display='none';
}
if(elementname != '2'){
document.getElementById('2').style.display='none';
}
if(elementname != '3'){
document.getElementById('3').style.display='none';
}
if(elementname != '4'){
document.getElementById('4').style.display='none';
}
document.getElementById(elementname).style.display='block';
}
-->
</script>

Sie soll jeweils drei von vier Elementen ausblenden und das vierte anzeigen. Schreibe ich nur die Zeile:

document.getElementById(elementname).style.display='block';

in die funktion geht es. Mit den if's zuvor passiert aber nichts mehr. Kann mir vielleicht jemand sagen wieso?

Danke schonmal und
Gruß, Olli

  1. Servus Olli,

    Das Problem ist nicht "was" sie macht, sondern dass sie anscheinend nicht komplett ausgeführt wird.

    anscheinend? Nicht komplett? Ausgeführt? Bis wohin wird die Funktion ausgeführt?

    <script type="text/javascript">
    <!--
    function einblenden(elementname){
    if(elementname != '1'){
    document.getElementById('1').style.display='none';
    }
    if(elementname != '2'){
    document.getElementById('2').style.display='none';
    }
    if(elementname != '3'){
    document.getElementById('3').style.display='none';
    }
    if(elementname != '4'){
    document.getElementById('4').style.display='none';
    }
    document.getElementById(elementname).style.display='block';
    }
    -->
    </script>

    Trotz fehlender Information, kann ich Dir folgendes sagen:
    Die Funktion kannst Du um einiges kürzer in unterschiedlichen Varianten gestalten. Jede von ihnen ist jedoch eleganter, als diese hier. Beispiel:
    Statt bei jedem Aufruf die Strings zu vergleichen, kannst Du die ID des zuvor eingeblendeten Elementes in einer globalen Variable speichern. Folgich muss die Funktion dann nur noch dieses Element ausblenden, und das neue Einblenden. Die neue ID wird dann in der globalen Variable abgelegt.

    Freundliche Grüße
    Stefano Albrecht

    --
    Sancta Simplicitas!
    1. Hallo Stefano,

      Danke für die schnelle Antwort.
      Nun ich kenne mich leider mit javascript nicht wirklich aus (debuggen kann man da nichts oder?). Aber soweit ich das sehe bewirkt die oben aufgeführte funktion einfach gar nichts. Bei mir jedenfalls.

      Firefox 1.5.0.4, javascript natürlich aktiviert

      Das hier klappt problemlos:

      <script type="text/javascript">
      <!--
      function einblenden(elementname){
      document.getElementById(elementname).style.display='block';
      }
      -->
      </script>

      Nach der erweiterung der Funktion geschieht jedoch nichts mehr. Müssen die abgefragten Elemente alle existieren? Oder spielt das keine Rolle?

      Danke und Gruß,
      Olli

      1. Hi,

        Nach der erweiterung der Funktion geschieht jedoch nichts mehr. Müssen die abgefragten Elemente alle existieren? Oder spielt das keine Rolle?

        Die JavaScript-Konsole vom Firefox (zu erreichen im Menü 'Extras') wird dir darauf die Antwort geben.

        Gruß,

        Harlequin

      2. Hallo,

        Nach der erweiterung der Funktion geschieht jedoch nichts mehr. Müssen die abgefragten Elemente alle existieren? Oder spielt das keine Rolle?

        Ja, schon. Also, wenn Du schreibst:

        if(elementname != '4'){
        document.getElementById('4').style.display='none';
        }

        dann sollte für den Fall, daß elementname gleich '4' ist, auch sichergestellt werden, daß ein DOM-Element mit dieser ID existiert:
        if(elementname != '4' && typeof document.getElementById('4') == 'object'){
          document.getElementById('4').style.display='none';
        }

        Die Anregung von Stefano solltest Du trotzdem berherzigen.

        Ciao,
        Andreas

        --
        "Das Corporate Design für das Internet sieht eine Reihe von Grafikelementen vor, die die Optik der Webseite visuell und funktionell beeinflussen." - (Zitat aus dem "Styleguide Corporate Design"  eines großen Konzerns...)
      3. Hallo,

        Super Tipp, danke!
        Das javascript hatte wirklich Probleme damit, dass nicht alle Elemente existiert haben. Jetzt klappts.

        Danke Jungs,
        Olli

  2. Hallo,

    ergänzend zu Stefanos Hinweis fällt mir noch ein, daß IDs von HTML-Elementen nicht mit einer Ziffer beginnen dürfen (http://www.w3.org/TR/html4/types.html#type-name).
    Ich habe allerdings keine Ahnung, inwieweit das für Javascript von Belang ist. Einfach mal ausprobieren.

    Ciao,
    Andreas

    --
    "Das Corporate Design für das Internet sieht eine Reihe von Grafikelementen vor, die die Optik der Webseite visuell und funktionell beeinflussen." - (Zitat aus dem "Styleguide Corporate Design"  eines großen Konzerns...)