JS Kleine Übungen

Erste Schritte: JS Kleine Übungen: Interaktiver Klickzähler

In diesem Tutorial lernst du, wie du einen einfachen interaktiven Klickzähler mit JavaScript erstellst.
Diese Übung ist ideal, wenn du gerade anfängst, JavaScript zu lernen und ein Gefühl dafür bekommen möchtest, wie du auf Benutzeraktionen reagieren kannst.

Ziel der Übung

Der interaktive Klickzähler erhöht bei jedem Klick auf einen Button einen Zähler und zeigt den aktuellen Wert in einem HTML-Element an.
Dies hilft dir, den Umgang mit Variablen, Event-Listenern und der DOM-Manipulation zu üben.

Schritt 1: HTML-Struktur erstellen

Erstelle zunächst eine einfache HTML-Seite mit einem Button und einem Element, in dem der Zähler angezeigt wird. 

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <title>Interaktiver Klickzähler</title>
</head>
<body>
    <h1>Interaktiver Klickzähler</h1>
    <p id="counter">0</p>
    <button id="clickBtn">Klicke mich!</button>

    <script src="script.js"></script>
</body>
</html>

Hier definieren wir den Button mit der ID clickBtn und einen Absatz mit der ID counter,
in dem der aktuelle Zählerstand angezeigt wird.

Schritt 2: JavaScript für den Klickzähler

Erstelle nun eine separate JavaScript-Datei (z. B. script.js), in der du den Zähler implementierst.
Verwende dabei let für veränderliche Variablen und setze einen Event Listener ein, der auf Klicks reagiert. 

// script.js

// Initialer Zählerwert
let count = 0;

// Element, in dem der Zählerstand angezeigt wird
const counterElement = document.getElementById("counter");

// Button-Element abrufen
const clickButton = document.getElementById("clickBtn");

// Event Listener: Bei jedem Klick wird der Zähler erhöht und der Text aktualisiert
clickButton.addEventListener("click", function() {
    count++;  // Zähler erhöhen
    counterElement.textContent = count;  // Neuen Wert anzeigen
});

Der obige Code setzt folgende Schritte um:

  • Er definiert die Variable count mit dem Startwert 0.
  • Er greift auf das HTML-Element mit der ID counter zu, um später den Zählerwert zu aktualisieren.
  • Mit addEventListener wird dem Button das Ereignis click zugeordnet. Bei jedem Klick wird der Zähler erhöht und der neue Wert in das Element geschrieben.

Schritt 3: Seite testen und anpassen

Speichere beide Dateien (index.html und script.js) im selben Ordner und öffne index.html in deinem Browser.
Klicke auf den Button und beobachte, wie sich der Zählerwert aktualisiert.
Experimentiere, indem du zum Beispiel die Farbe des Zählers änderst oder weitere Event-Listener hinzufügst.

Tipps & Erweiterungsmöglichkeiten

  • Styling hinzufügen: Mit CSS kannst du das Aussehen des Zählers und des Buttons anpassen.
  • Weitere Events: Probiere andere Events wie onMouseOver oder onDblClick aus, um verschiedene Interaktionen zu testen.
  • Reset-Funktion: Ergänze einen weiteren Button, der den Zähler auf 0 zurücksetzt.
  • Animationen: Mit CSS-Übergängen oder JavaScript kannst du kleine Animationen einbauen, wenn der Zähler sich ändert.

Fazit

Der interaktive Klickzähler ist eine großartige Übung, um die Grundlagen von JavaScript zu erlernen:
Variablen, Event-Handling und DOM-Manipulation.
Mit diesen einfachen Bausteinen kannst du nach und nach komplexere Funktionen realisieren und so dein Wissen erweitern.