[ERLEDIGT] document.getElementById(...).classList.toggle(...); funktioniert nicht

[sunil2809]

Hallo zusammen,

ich tüftle seit einer gefühlten Ewigkeit an einem JavaScript Code herum, der aber nicht funktionieren will. Könnt ihr mir helfen?

Mein Ziel ist es, dass wenn ich auf einen Button klicke, sich die Seite in ein "Dark-Theme" umwandelt. Das klappt so auch wunderbar:

Das hier ist meine JS Funktion

function toggleTheme() {
    document.getElementById('nav').classList.toggle('dark');
}

Hier mein CSS

#nav {
  background: #fff;
}

.dark #nav {
    background: #333;
}

und hier mein HTML

<button onlick="toggleTheme()">Dark</button>

<div id="nav">
    <ul>
        <li>Home</li>
        <li>About</li>
    </ul>
</div>

Nun möchte ich aber alle Elemente bearbeiten. Also habe ich folgendes geändert:

function toggleTheme() {
    document.getElementsByClassName('*').classList.toggle('dark');
}

body {
  background: #fff;
}

.dark body {
   background: #333;
}
.dark #nav {
    background: #333;
}

So funktioniert das Ganze leider nicht meher.

Ich stehe grade echt auf dem Schlauch und freue mich deswegen über jede Antwort von euch!
Linus

 

[sunil2809]

Das Problem liegt hier:

document.getElementsByClassName('*').classList.toggle('dark');

So funktioniert es in jQuery aber nicht in Vanilla-JS. getElementsByClassName liefert eine Nodelist, im wesentlichen ein Array, über das Du mit einer Schleife iterieren musst.

Danke für die schnelle Antwort, aber... was genau heißt das jetzt?

 

[sunil2809]

Du musst mit einer for-Schleife die ganzen Elemente der Nodelist abarbeiten, etwas so:

var elems = document.getElementsByClassName('*');
for (var i = 0; i < elems.length; i++) {
    elems[i].classList.toggle('dark');
}

Uffff, sorry falls ich nerve, aber ich bekomme das nicht hin. So der Pro in Js bin ich nämlich auch net...

 

[sunil2809]

Ich habe es auch geschrieben, ohne es zu testen, kann nicht für Fehlerfreiheit garantieren. Wenn Die Seite online ist, dann poste die URL, dann kann man den Fehler sicher schnell finden.

https://test.ahoilettering.de/maikset/ ist der Link.

 

[sunil2809]

Das habe ich eben übersehen: Wenn du Wildcards wie * verwenden willst, musst Du querySelectorAll verwenden:

var elems = document.querySelectorAll('*');
for (var i = 0; i < elems.length; i++) {
    elems[i].classList.toggle('dark');
}

Funktioniert! DAAAAAAAAAANNNKKKKEEEEEEE!! Meine Rettung! Vielen Vielen Vielen Vielen Vielen Dank!

Beste Grüße
Linus