Funktions-Schleife "hängt" nach erster Funktion

[Gunnar Bittersmann]

@@Leonard:

nuqneH

Ich wollte mal was neues ausprobieren, in dem ich einen Link schaffe, der die Hintergrundfarbe auf schwarz und die Textfarbe auf weis ändert UND auch wieder zurück (!).

Das solltest du nicht (direkt) mit JavaScript tun. Layout-Informationen gehören nicht in den JavaScript-Code.

Was, wenn du dich entschließt, etwas weniger Kontrast vorzusehen, also nicht Schwarz und Weiß, sondern Dunkelgrau und Hellgrau zu verwenden? Dann müsstest du bei einer Layoutänderung dein JavaScript ändern. Das sollte man unbedingt vermeiden! Stattdessen Dokumentstruktur (HTML), Präsentation (CSS) und Verhalten (JavaScript) sauber voneinander trennen.

Das einzige, was dein JavaScript tun sollte, ist, im DOM (Dokumentstruktur nach dem Parsen des HTML) die Information zu hinterlassen, ob der Tag- oder der Nachtmodus gerade aktiv ist.

<a href="javascript:daynight();">Tag-/Nacht-Modus</a>

Das sollte kein Link sein (da zu einer anderen Ressource gegangen wird), sondern ein Button. Dieser bekommt einen Eventhandler, der die Funktion aufruft. Quick and dirty („herkömmlich“) per Eventhandler-Attribut:

<button onclick="[code lang=javascript]daynight();">Tag-/Nacht-Modus</button>[/code]

Wie man’s richtig macht, siehe molilys Einführung in JavaScript.

Die Funktion daynight() könnte nun dem html-Element eine Klasse "night" verpassen bzw. diese entfernen:

function daynight()  
{  
  if document.documentElement.className === "night"  
  {  
    document.documentElement.className = "";  
  }  
  else  
  {  
    document.documentElement.className = "night";  
  }  
}

was sich http://de.selfhtml.org/javascript/sprache/bedingt.htm#entweder_oder@title=kürzer schreiben lässt als

function daynight()  
{  
  document.documentElement.className = document.documentElement.className === "night" ? "" : "night";  
}

*Wie* die beiden Zustände dargestellt werden, steht im Stylesheet:

body  
{  
  background: white;  
  color: black;  
}  
  
.night body  
{  
  background: black;  
  color: white;  
}

Nun lassen sich Änderungen in Dunkelgrau/Hellgrau problemlos vollziehen, ohne dass das JavaScript dazu angefasst werden muss.

Problematisch daran: Eventuell vorhandene andere Klassen des html-Elements werden überschrieben. Das möchte man nicht. Abhilfe schafft das classList-Objekt:

function daynight()  
{  
  if document.documentElement.classList.contains("night")  
  {  
    document.documentElement.classList.remove("night");  
  }  
  else  
  {  
    document.documentElement.classList.add("night");  
  }  
}

was man ganz einfach haben kann:

function daynight()  
{  
  document.documentElement.classList.toggle("night");  
}

Eine andere Möglichkeit wäre, keine Klasse, sondern ein data-Attribut zu verwenden:

function daynight()  
{  
  document.documentElement.dataset.isNight = document.documentElement.dataset.isNight === "true" ? "" : "true";  
}

(für ältere Browser müsste man das mit getAttribute()/setAttribute() machen) und im Stylesheet

body  
{  
  background: white;  
  color: black;  
}  
  
[data-isNight="true"] body  
{  
  background: black;  
  color: white;  
}

Qapla'