JavaScript toggle color onclick?

Hallo.

Ich möchte in einem HTML Dokument mit JS die Farbe einer Schrift durch Klicken ändern. Default soll es beispielsweise schwarz sein, wenn man auf den Text klickt soll es grün werden. Bei einem zweiten Klick soll die Schrift wieder schwarz werden.

Ich habe viel ausprobiert, komme aber nicht zum Ziel.

Vielleicht könnt Ihr mir helfen? Vielen Dank im Vorraus!

Answer 1

[regex9]

Zuerst einmal benötigst du einen Listener für das Klickevent:

<p id="text"></p>
<script>
  var textElement = document.getElementById("text");
  textElement.addEventListener("click", function(evt) {
    // your code to handle click ...
  });
</script>

Dann kannst du noch einen CSS-Klassenselektor definieren, welcher die zweite Schriftfarbe setzt. Über das classList-Property kannst du die toggle-Methode nutzen, um die zweite Klasse dem textElement hinzuzufügen oder wieder zu entfernen.

Die Standardfarbe solltest du anschließend auch noch im CSS festlegen. Bspw. via Elementselektor:

p { color: black; }

Answer 2

[Tyldu]

ganz einfach: https://jsfiddle.net/w6vud2qn/

beim klicken prüfst du ob die css klasse die den alternativen style hat vorhanden ist bei dem objekt und dementsprechend entfernst du diese klasse entweder oder fügst sie eben hinzu.

noch einfacher mit der toggle funktion wie regex erwähnt.

Woher ich das weiß: Studium / Ausbildung – Softwareentwickler, B. Sc. Informatik