# Inhalte und CSS-Klassen ändern

## Lernziele

Auf dieser Seite lernst du, wie du mit JavaScript sichtbare Inhalte einer Webseite veränderst. Danach kannst du:

- Text in HTML-Elementen austauschen
- HTML-Inhalte gezielt einfügen
- CSS-Klassen hinzufügen, entfernen und umschalten
- den Zustand eines Elements prüfen
- eine kleine interaktive Oberfläche bauen

---

## Inhalte mit `textContent` ändern

Nachdem du ein Element mit `querySelector()` ausgewählt hast, kannst du seinen Text über die Eigenschaft `textContent` lesen oder verändern.

```html
<p class="nachricht">Willkommen!</p>
<button class="aendern-button">Text ändern</button>
```

```js
const nachricht = document.querySelector(".nachricht");
const aendernButton = document.querySelector(".aendern-button");

aendernButton.addEventListener("click", function () {
  nachricht.textContent = "Der Text wurde geändert.";
});
```

Beim Klick auf den Button wird der bisherige Inhalt des Absatzes ersetzt.

> **Merke:** `textContent` behandelt seinen Inhalt als reinen Text. HTML-Tags werden dabei nicht als HTML ausgeführt.

```js
nachricht.textContent = "<strong>Hallo</strong>";
```

Im Browser erscheint dann tatsächlich:

```text
<strong>Hallo</strong>
```

Das ist oft sinnvoll, weil Inhalte auf diese Weise sicher als Text ausgegeben werden.

---

## Inhalte mit `innerHTML` ändern

Mit `innerHTML` kannst du nicht nur Text, sondern auch HTML-Code in ein Element einsetzen.

```html
<p class="info"></p>
```

```js
const info = document.querySelector(".info");

info.innerHTML = "Heute ist <strong>ein guter Tag</strong>.";
```

Das Ergebnis im Browser lautet:

> Heute ist **ein guter Tag**.

Auch Listen oder mehrere Elemente lassen sich einsetzen:

```js
info.innerHTML = `
  <h2>Aufgaben</h2>
  <ul>
    <li>JavaScript üben</li>
    <li>Code testen</li>
  </ul>
`;
```

### Wann verwende ich was?

| Eigenschaft | Geeignet für | Beispiel |
|---|---|---|
| `textContent` | normalen Text | Überschriften, Meldungen, Zahlen |
| `innerHTML` | HTML-Strukturen | Listen, Links, hervorgehobene Inhalte |

Verwende `textContent`, wenn du nur Text ändern möchtest. Es ist einfacher und sicherer.

Mit `innerHTML` solltest du besonders vorsichtig sein, wenn Inhalte von Nutzerinnen und Nutzern stammen. Ungeprüfte Eingaben können unerwünschten HTML- oder JavaScript-Code enthalten.

---

## CSS-Klassen mit `classList` verändern

CSS-Klassen bestimmen häufig das Aussehen eines Elements. JavaScript kann diese Klassen dynamisch ändern.

Betrachte zunächst dieses HTML:

```html
<p class="status">Die Lampe ist aus.</p>
<button class="licht-button">Licht einschalten</button>
```

Und dieses CSS:

```css
.status {
  padding: 12px;
  background-color: #eeeeee;
  color: #222222;
}

.an {
  background-color: #fff3a3;
  color: #7a4b00;
  font-weight: bold;
}
```

Die Klasse `status` sorgt für das normale Aussehen. Die Klasse `an` soll zusätzlich erscheinen, wenn die Lampe eingeschaltet ist.

---

## Eine Klasse hinzufügen: `classList.add()`

Mit `classList.add()` fügst du einem Element eine CSS-Klasse hinzu.

```js
const status = document.querySelector(".status");

status.classList.add("an");
```

Danach hat der Absatz beide Klassen:

```html
<p class="status an">Die Lampe ist aus.</p>
```

Die CSS-Regeln von `.an` werden nun angewendet.

Du kannst auch mehrere Klassen gleichzeitig hinzufügen:

```js
status.classList.add("an", "hervorgehoben");
```

---

## Eine Klasse entfernen: `classList.remove()`

Mit `classList.remove()` entfernst du eine Klasse wieder.

```js
status.classList.remove("an");
```

Das Element besitzt anschließend nur noch die Klasse `status`.

Auch hier sind mehrere Klassen möglich:

```js
status.classList.remove("an", "hervorgehoben");
```

---

## Eine Klasse umschalten: `classList.toggle()`

Besonders praktisch ist `classList.toggle()`. Die Methode prüft automatisch:

- Ist die Klasse noch nicht vorhanden? Dann wird sie hinzugefügt.
- Ist die Klasse schon vorhanden? Dann wird sie entfernt.

```js
status.classList.toggle("an");
```

Damit eignet sich `toggle()` hervorragend für Schalter, Menüs, Akkordeons oder einen Dark Mode.

### Beispiel: Dunklen Modus umschalten

```html
<button class="modus-button">Dunklen Modus umschalten</button>

<main class="seite">
  <h2>Meine Webseite</h2>
  <p>Dieser Bereich kann sein Aussehen ändern.</p>
</main>
```

```css
.seite {
  padding: 24px;
  background-color: white;
  color: #222222;
}

.dunkel {
  background-color: #222222;
  color: white;
}
```

```js
const modusButton = document.querySelector(".modus-button");
const seite = document.querySelector(".seite");

modusButton.addEventListener("click", function () {
  seite.classList.toggle("dunkel");
});
```

Bei jedem Klick wird die Klasse `dunkel` hinzugefügt oder wieder entfernt.

---

## Prüfen, ob eine Klasse vorhanden ist

Mit `classList.contains()` kannst du herausfinden, ob ein Element eine bestimmte Klasse besitzt.

```js
const dunkelAktiv = seite.classList.contains("dunkel");

console.log(dunkelAktiv);
```

Das Ergebnis ist entweder `true` oder `false`.

Diese Prüfung ist nützlich, wenn sich nicht nur das Aussehen, sondern auch ein Text ändern soll.

```js
modusButton.addEventListener("click", function () {
  seite.classList.toggle("dunkel");

  if (seite.classList.contains("dunkel")) {
    modusButton.textContent = "Hellen Modus einschalten";
  } else {
    modusButton.textContent = "Dunklen Modus einschalten";
  }
});
```

Nun passt der Buttontext immer zum aktuellen Zustand.

---

## Praxisbeispiel: Eine Hinweisbox ein- und ausblenden

In diesem Beispiel wird ein Hinweis zunächst verborgen. Ein Klick auf den Button zeigt ihn an. Beim nächsten Klick wird er wieder ausgeblendet.

### HTML

```html
<button class="hinweis-button">Hinweis anzeigen</button>

<p class="hinweis versteckt">
  JavaScript wird direkt im Browser ausgeführt.
</p>
```

### CSS

```css
.hinweis {
  margin-top: 16px;
  padding: 12px;
  border-left: 4px solid #2c7a7b;
  background-color: #e6fffa;
}

.versteckt {
  display: none;
}
```

### JavaScript

```js
const hinweisButton = document.querySelector(".hinweis-button");
const hinweis = document.querySelector(".hinweis");

hinweisButton.addEventListener("click", function () {
  hinweis.classList.toggle("versteckt");

  if (hinweis.classList.contains("versteckt")) {
    hinweisButton.textContent = "Hinweis anzeigen";
  } else {
    hinweisButton.textContent = "Hinweis ausblenden";
  }
});
```

### Was passiert hier?

1. Der Absatz startet mit der Klasse `versteckt`.
2. Diese Klasse setzt `display: none`.
3. Beim Klick schaltet `toggle("versteckt")` die Klasse um.
4. `contains("versteckt")` prüft anschließend den neuen Zustand.
5. Der Buttontext wird passend angepasst.

✨ So entsteht eine einfache, aber echte Interaktion.

---

## Alternative: Klassen vollständig ersetzen

Manchmal möchtest du die gesamte Klassenliste ersetzen. Dafür gibt es `className`.

```js
const box = document.querySelector(".box");

box.className = "box erfolg";
```

Danach besitzt das Element genau die Klassen `box` und `erfolg`.

Diese Schreibweise ist möglich, aber `classList` ist in vielen Situationen besser lesbar und sicherer. Wenn du nur eine einzelne Klasse ändern möchtest, verwende daher meist:

```js
box.classList.add("erfolg");
```

oder:

```js
box.classList.remove("fehler");
```

---

## Komplettes Beispiel: Richtige und falsche Antwort anzeigen

Dieses Beispiel verbindet Textänderungen und CSS-Klassen. Beim Klick auf einen Button erscheint eine Rückmeldung.

### HTML

```html
<h2>Kurze Frage</h2>
<p>Welche Sprache macht Webseiten interaktiv?</p>

<button class="antwort-button">JavaScript</button>
<button class="antwort-button">HTML</button>

<p class="rueckmeldung"></p>
```

### CSS

```css
.rueckmeldung {
  margin-top: 16px;
  padding: 12px;
  font-weight: bold;
}

.richtig {
  background-color: #d9f7df;
  color: #176b2c;
}

.falsch {
  background-color: #ffe0e0;
  color: #9b1c1c;
}
```

### JavaScript

```js
const antwortButtons = document.querySelectorAll(".antwort-button");
const rueckmeldung = document.querySelector(".rueckmeldung");

antwortButtons.forEach(function (button) {
  button.addEventListener("click", function () {
    rueckmeldung.classList.remove("richtig", "falsch");

    if (button.textContent === "JavaScript") {
      rueckmeldung.textContent = "Richtig! JavaScript macht Webseiten interaktiv.";
      rueckmeldung.classList.add("richtig");
    } else {
      rueckmeldung.textContent = "Noch nicht richtig. HTML beschreibt die Struktur einer Webseite.";
      rueckmeldung.classList.add("falsch");
    }
  });
});
```

### Wichtige Beobachtungen

- `querySelectorAll()` wählt beide Buttons aus.
- `forEach()` richtet für jeden Button einen Klick-Listener ein.
- Vor jeder neuen Rückmeldung werden die alten Klassen entfernt.
- Die neue Rückmeldung erhält entweder die Klasse `richtig` oder `falsch`.

Ohne das vorherige `remove()` könnte eine Rückmeldung gleichzeitig beide Klassen besitzen. Das führt leicht zu widersprüchlichem CSS.

---

## Häufige Fehler

### Die Klasse wird ohne Punkt geschrieben

Bei `querySelector()` benötigst du für eine Klasse einen Punkt:

```js
const box = document.querySelector(".box");
```

Bei `classList.add()` schreibst du den Klassennamen **ohne** Punkt:

```js
box.classList.add("aktiv");
```

Das hier wäre falsch:

```js
box.classList.add(".aktiv");
```

---

### JavaScript findet das Element nicht

Wenn dieses Ergebnis erscheint:

```text
Cannot read properties of null
```

wurde das Element wahrscheinlich nicht gefunden. Prüfe:

- Ist der Klassenname im HTML korrekt?
- Steht im Selektor ein Punkt vor dem Klassennamen?
- Wird das JavaScript erst ausgeführt, nachdem das HTML geladen wurde?

Eine einfache Lösung ist, das `<script>`-Element am Ende des `<body>` einzubinden:

```html
<body>
  <p class="nachricht">Hallo!</p>

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

Dann existieren die HTML-Elemente bereits, wenn JavaScript gestartet wird.

---

### Die alte Klasse bleibt erhalten

Wenn ein Element nur eine von zwei Zustandsklassen haben soll, entferne zuerst beide möglichen Klassen:

```js
rueckmeldung.classList.remove("richtig", "falsch");
```

Danach fügst du die gewünschte Klasse hinzu:

```js
rueckmeldung.classList.add("richtig");
```

---

## Übung

Erstelle einen Button mit der Aufschrift „Details anzeigen“. Beim Klick soll ein Textabschnitt sichtbar werden. Der Button soll danach „Details ausblenden“ heißen. Beim nächsten Klick soll der Abschnitt wieder verschwinden.

Nutze dafür:

- `querySelector()`
- `addEventListener()`
- `classList.toggle()`
- `classList.contains()`
- `textContent`

### Mögliche Lösung

```html
<button class="details-button">Details anzeigen</button>

<p class="details versteckt">
  Diese zusätzlichen Informationen sind zunächst verborgen.
</p>
```

```css
.versteckt {
  display: none;
}
```

```js
const detailsButton = document.querySelector(".details-button");
const details = document.querySelector(".details");

detailsButton.addEventListener("click", function () {
  details.classList.toggle("versteckt");

  if (details.classList.contains("versteckt")) {
    detailsButton.textContent = "Details anzeigen";
  } else {
    detailsButton.textContent = "Details ausblenden";
  }
});
```

---

## Zusammenfassung

Mit JavaScript kannst du Inhalte und das Aussehen einer Webseite direkt verändern:

- `textContent` setzt oder liest reinen Text.
- `innerHTML` setzt HTML-Inhalte.
- `classList.add()` fügt eine Klasse hinzu.
- `classList.remove()` entfernt eine Klasse.
- `classList.toggle()` schaltet eine Klasse ein oder aus.
- `classList.contains()` prüft, ob eine Klasse vorhanden ist.

Damit hast du ein wichtiges Werkzeug für interaktive Webseiten: Du kannst auf Aktionen reagieren und sichtbares Feedback geben. Im nächsten Schritt lernst du, Ereignisse mit `addEventListener()` noch gezielter einzusetzen.