getELementbyClassName und dann Klasse verändern

[Samuel (Gast)]

ich hole mir viele Elemente so:

var elements = document.getElementsByClassName("hihi");

danach will ich die Klassen all dieser Elemente ändern, das mache ich in 
einer For Schleife so:

elements[i].className = "mimi";

Aber aus irgendeinem Grund scheint das nicht zu funktionieren...

Kann mir einer aushelfen?

[Miregal (Gast)]

Handelt es sich beim elements denn um ein Array?

[Daniel A. (daniel-a)]

Der gezeigte Code ist Korrekt. Der Fehler könnte in der nicht gezeigten 
Schleife liegen, in einem falschgeschriebenen klassennamen, oder in 
einer fehlerhaften schlussfolgerung des nicht funktionierens. Ein 
vollständiges minimalbeispiel bei welchem das gleiche Problem auftritt 
wäre sehr hilfreich beim aufspüren des fehlers. Gibt es Fehlermeldungen 
in den Entwicklertolls deines browsers? Falls ja, welche?

Hier mal ein funktionierendes Beispiel:
http://jsfiddle.net/Loj9zny6/

Einige häufige Fehleruhrsachen in js sind:
  Vergessen geschweifter klammern bei schleifen
  Verwenden von schleifen der form for(x in y) bei pseudoarrays
  Der Versuch auf Elemente zuzugreifen, befor diese vom browser geparst 
wurden.

Versuche auch mal den code in folgendes Konstrukt zu packen:
addEventListener("load",function(){
  // Den code hier einsetzen
});

Viele Browser bieten ausserdem einen debugger, ich empfehle den von 
google chrome.

[Samuel (Gast)]

Daniel A. schrieb:
> Hier mal ein funktionierendes Beispiel:

hier ein nichtfunktionierendes Beispiel:
http://jsfiddle.net/Loj9zny6/2/

Bei einem Element funktioniert es. Aber wenn es mehrere sind, geht es 
nicht..

[Daniel A. (daniel-a)]

Ich habe es mit Google Chrome auf Android versucht, und folgendes 
festgestellt:
getElementsByClassName gibt eine Referenz auf eine NodeList zurück, 
welche bei änderung eines klassennanens eines elements sofort 
aktualisiert wird. Nachdem das erste element einen anderen klassennamen 
bekam, wurde es aus der liste entfernt, und das element an index 1 bekam 
den index 0. Der nachfolgende zugriff auf element 1 konnte danach 
natürlich nichtmehr funktionieren.

Das webbrowser das dürfen und tun wusste ich vorher nicht. Ein 
webbrowser muss die liste auch nicht zwangslaufig sofort updaten.

Mögliche lösungen sind die Schleife statt hoch herunter zälen zu lassen, 
oder den innhalt der NodeList in ein Array zu kopieren, und auf die 
kopie zuzugreifen.

Eine mögliche Lösung:
  http://jsfiddle.net/Loj9zny6/3/

[Samuel (Gast)]

Danke vielmals!

Hat jetzt funktioniert! Habe einfach immer die [0] gsetzt..