getELementbyClassName und dann Klasse verändern

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.

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/