• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

classList.toogle

uuuguuug

Neues Mitglied
Hallo es gibt nicht sehr viel zu sagen ausser dass der Code nicht funktioniert. Vielleicht sieht jemand was FALSCH ist? Den Code habe ich nur zu Testzwecken geschrieben, hat also keinen größeren Sinn.

Code:
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <link rel="icon" type="image/x-icon" href="../kap1/pics/dancingape.jpg" />
  <title>Test THIS</title>
  <style>
    .test {
      background-color: cadetblue;
      color: blueviolet;
      font-size: 3em;
    }
  </style>
  <script>
    function wechsleStyle() {
      document.getElementById("klick-mich").classList.toggle("test");
    }
    document
      .getElementById("klick-mich")
      .addEventListener("click", wechsleStyle);
  </script>
</head>
<body>
  <div id="klick-mich" style="background-color: bisque">
    ... Punkt Punkt Punkt - here KLICKTEST - Punkt Punkt Punkt...
  </div>
  <noscript> JavaScript ist nicht aktiv! </noscript>
</body>
</html>

Jetzt noch kurz was passieren sollte, obwohl das für versierte Coder wahrscheinlich schnell zu erkennen ist, nämlich dass bei einem Klick auf das DIV-Element das Stylesheet ".test" aktiviert und deaktiviert wird.
Leider funktioniert das nicht. Was mache ich falsch?

mfg der UuugUuug

ps.: Eine "Sache" noch, wenn ich mir den Code im Debugger anschaue wird angezeigt dass

.getElementById("klick-mich")

NULL ist, was auch erklärt dass es nicht funktioniert. Dai Frage ist also WARUM ist das Element NULL !?
 
Zuletzt bearbeitet:
Werbung:
Vielen Dank das hat sehr geholfen, macht ja auch Sinn. Da mir bei vielen Beispielen allerdings "gesagt" wurde dass man vieles davon in den Head schreiben kann hatte ich es halt auch so gemacht. Scheint da wohl als müsste ich da unterscheiden. Nochmal vielen Dank, das hat mein Verständnis erweitert.
Kann dann hier wohl geschlossen werden.

Gruss der UuugUuug
 
Werbung:
Zurück
Oben