getElementsByClassName funktioniert nicht

[fiedel]

Hallo!
Ich habe mir ein kleines Skript erstellt, das alle Elemente mit class="visible" als block darstellen soll und alle mit class="hidden" mit "none" verstecken soll... soweit die Theorie, doch leider klappt es in der Praxis nicht ganz...

<script type="text/javascript">
function display() {
        var hidden = document.getElementsByClassName('hidden');
        var visible = document.getElementsByClassName('visible');
        
        hidden.style.display = "none";
        visible.style.display = "block";
}

window.onload = display;
</script>

Ich vermute, dass es an dem getElementsByClassName liegen könnte, da es einwandfrei funktionierte, als ich das Element mit getElementById über die ID angesprochen hatte.

 

[threadi]

In JavaScript gibt es keine Funktion getElementsByClassName, die ist meines Wissens nur für zukünftige Versionen angedacht. Man kann sie sich aber selbst schreiben, hab ich bei einigen Projekten schon so verwendet:

function getElementsByClassName(tagname, findClass, dothis) {
if(tagname)
{
 var aElm=document.body.getElementsByTagName(tagname);
 for(var i=0; i<aElm.length; i++) {
  if(aElm[i].className==findClass) {
   if(dothis == "machwas")
    {
     // Code zum Ausführen
    }
   }
  }
 }
}

 

[crash]

Das ist verkehrt. Firefox 3.0 kennt getElementsByClassName schon.

Hier habe ich einen schönen Wrapper: www.lubyte.de Git - javascript-q.git/blob - snippets/getElementsByClassName.js

 

[fiedel]

Okay, danke schonmal für eure Antworten! Doch leider hat es immernoch nicht geklappt: Test

Ich wäre euch sehr dankbar, wenn ihr mal schauen könntet, wo da der Fehler liegt!

 

[threadi]

Benutz die JavaScript-Konsole im Firefox, da siehst Du sofort wo es hängt.

document.hidden.style.display = "none";

 

[fiedel]

Oh, okay und warum ist es undefined?

 

[crash]

Mein getElementsByClassName() gibt immer ein Array zurück und kein konkretes Element.

Du musst also loopen, sofern die hidden[0] nicht reicht.

 

[fiedel]

Danke schön, hat funktioniert!

function display() {
    var hidden = getElementsByClassName('hidden');
    var visible = getElementsByClassName('visible');
        
    for(i=0;i<hidden.length;i++) {  
        hidden[i].style.display = "none";  
    } 
        
    for(i=0;i<visible.length;i++) {  
        visible[i].style.display = "block";  
    } 
}