JavaScript reagiert auf Nutzeraktionen: Klickst du auf einen Button, erscheint darunter eine Nachricht. HTML erstellt den Button, CSS gestaltet ihn und JavaScript legt fest, was beim Klick passiert.
Ein Farbeffekt beim Überfahren mit dem Mauszeiger heißt Hover-Effekt. Dafür genügt CSS. So siehst du, welche Aufgabe HTML, CSS und JavaScript jeweils übernehmen.
Eine kleine Website bauen
Speichere den folgenden Code als index.html und öffne die Datei in einem Browser. Der Button färbt sich beim Darüberfahren dunkler. Bei einem Klick ändert sich der Text darunter.
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Mein erster Button</title>
<style>
button {
background-color: royalblue;
color: white;
padding: 10px 16px;
border: 0;
border-radius: 6px;
}
button:hover {
background-color: darkblue;
}
button:focus-visible {
outline: 3px solid orange;
}
</style>
</head>
<body>
<h1>Meine erste Website</h1>
<button id="meinButton">Klick mich</button>
<p id="meldung">Hier erscheint gleich eine Nachricht.</p>
<script>
const button = document.querySelector("#meinButton");
const meldung = document.querySelector("#meldung");
button.addEventListener("click", () => {
meldung.textContent = "Gut gemacht, du hast den Button geklickt!";
});
</script>
</body>
</html>
Der HTML-Teil enthält die Überschrift, den Button und den Absatz. Das Element <button> erzeugt eine Schaltfläche. Das Element <p> steht für einen Textabsatz. Die Angaben id="meinButton" und id="meldung" geben den beiden Elementen Namen, mit denen JavaScript sie finden kann.
Wie CSS den Hover-Effekt gestaltet
Im Abschnitt zwischen <style> und </style> stehen die Gestaltungsregeln. Die Regel button legt fest, dass der Button blau mit weißer Schrift angezeigt wird. padding fügt Innenabstand hinzu; border-radius rundet die Ecken ab.
Solange der Mauszeiger über dem Button steht, gilt die Regel button:hover und ändert die Hintergrundfarbe zu Dunkelblau. :hover ist eine sogenannte Pseudoklasse: Sie beschreibt einen vorübergehenden Zustand eines Elements. Für diesen rein optischen Effekt brauchst du kein JavaScript.
Die Regel button:focus-visible zeigt einen orangefarbenen Rahmen, wenn der Button mit der Tastatur angesteuert wird. So bleibt die Schaltfläche auch ohne Maus gut erkennbar.
Wie JavaScript den Button findet
Der JavaScript-Code steht zwischen <script> und </script>. Mit document.querySelector("#meinButton") sucht der Browser auf der Seite nach dem Element mit der ID meinButton. Das Zeichen # bedeutet hier: Gesucht wird eine ID. Der gefundene Button wird in der Variablen button gespeichert.
Eine Variable ist ein Name, unter dem ein Wert gespeichert wird. const legt hier eine Variable an, deren Zuordnung später nicht neu gesetzt wird. Die nächste Zeile sucht auf dieselbe Weise den Absatz mit der ID meldung und speichert ihn unter dem Namen meldung.
Wie JavaScript auf den Klick reagiert
Die Zeile button.addEventListener("click", ...) weist den Browser an, einen Klick auf den Button zu erkennen. Ein Klick ist ein Ereignis. Der Ereignis-Listener legt fest, welcher Code bei diesem Ereignis ausgeführt wird.
Der Teil () => { ... } enthält eine Funktion. Eine Funktion ist ein Codeabschnitt, den der Browser ausführen kann. In diesem Beispiel läuft der Code in der Funktion, sobald jemand auf den Button klickt.
Die Zeile meldung.textContent = "Gut gemacht, du hast den Button geklickt!"; ersetzt den Text im Absatz. textContent steht für den Textinhalt eines Elements. Der Browser zeigt dadurch die neue Nachricht an, ohne die Seite neu zu laden.
Fehler beim Button beheben
Wenn beim Klick nichts passiert, prüfe zuerst, ob die IDs im HTML und im JavaScript genau übereinstimmen. meinButton und meinbutton sind verschiedene Schreibweisen. Achte außerdem auf Anführungszeichen und Klammern. Prüfe auch die geschweiften Klammern. Fehlt eine davon, kann der Browser den Code oft nicht richtig ausführen.
Der Hover-Effekt reagiert auf einen Mauszeiger. Auf Geräten mit Touchscreen gibt es nicht immer einen vergleichbaren Zustand. Deshalb sollte die Farbe beim Darüberfahren nie die einzige Information sein, die den Button verständlich macht. Die Beschriftung „Klick mich“ und die sichtbare Reaktion beim Klicken erklären seine Funktion.
Was du als Nächstes ändern kannst
Ändere den Text in der Zeile mit textContent, speichere die Datei und lade sie im Browser neu. Du kannst auch in der CSS-Regel button:hover eine andere Farbe einsetzen. So erkennst du direkt, welcher Code für die Gestaltung zuständig ist und welcher die Klickreaktion auslöst.