Anzahl der Wörter Zählen

So funktioniert das Script

Das Script hat drei Teile: Beim Laden der Seite würfelt es eine Zufallszahl aus und schreibt das Wort entsprechend oft auf die Seite; die Funktion pruefen() vergleicht später eure Eingabe mit dieser Zahl; und ganz unten wird die Funktion mit dem OK-Knopf verbunden. Alles steckt in einer sofort ausgeführten Funktion, damit die Variablen nicht mit anderen Scripts auf der Seite kollidieren.

const maximum = 75; // Wie oft darf das Wort höchstens dastehen?
const wort = "Hi";  // Welches Wort soll da stehen?

Ganz oben stehen die beiden Einstellungen: maximum begrenzt die Menge, wort legt fest, was überhaupt gezählt wird. Diese beiden Zeilen sind der Teil, den ihr beim Einbau anpassen dürft — der Rest funktioniert dann von allein.

const anzahl = Math.round(Math.random() * (maximum - 2)) + 1;

Hier entsteht die Zufallsmenge. Math.random() liefert eine Kommazahl zwischen 0 und 1. Multipliziert mit maximum - 2 (also 73) und mit Math.round() auf eine ganze Zahl gerundet, ergibt das 0 bis 73 — das + 1 am Ende verschiebt den Bereich auf 1 bis 74. So steht garantiert mindestens ein Wort da.

const woerter = [];
for (let i = 0; i < anzahl; i++) {
  woerter.push(wort);
}
document.getElementById("wz-woerter").textContent = woerter.join(" ");

Die for-Schleife läuft genau anzahl-mal und legt das Wort jedes Mal in das Array woerter (eine Liste). join(" ") klebt die Listeneinträge mit Leerzeichen dazwischen zu einem langen Text zusammen, der per textContent in den Absatz geschrieben wird. Das Original benutzte dafür noch document.write() — die moderne Variante schreibt stattdessen in ein vorhandenes Element und funktioniert damit auch, wenn das Script erst nach dem Seitenaufbau läuft.

const tipp = Number(feld.value);

if (feld.value === "" || isNaN(tipp)) {
  ausgabe.textContent = "Bitte tragt zuerst eure Zählung ein.";
  return;
}

Beim Klick auf „OK" liest pruefen() das Eingabefeld aus. Number() macht aus dem eingetippten Text eine Zahl. Ist das Feld leer oder steht dort keine Zahl (isNaN heißt „is Not a Number"), erscheint ein freundlicher Hinweis und return beendet die Funktion, ohne zu werten.

if (tipp === anzahl) {
  ausgabe.textContent = "Genau, es sind " + anzahl + " Wörter";
} else {
  ausgabe.textContent = "Falsch, es sind " + anzahl + " Wörter";
}

Der eigentliche Vergleich: === prüft streng, ob euer Tipp mit der ausgewürfelten Anzahl übereinstimmt. In beiden Fällen wird die richtige Anzahl verraten — nach einem Fehlversuch könnt ihr also nicht mehr „nachbessern", so war es auch beim Original.

document.getElementById("wz-pruefen").addEventListener("click", pruefen);

Zum Schluss wird pruefen() per addEventListener mit dem Knopf verbunden. Das Script steht dafür unter dem Markup, damit alle Elemente schon existieren, wenn es läuft.

Zum Anpassen: Tauscht wort gegen einen beliebigen Begriff und maximum gegen eine andere Obergrenze — mit maximum = 20 wird der Test deutlich humaner. Auch die Meldungstexte in pruefen() dürft ihr natürlich frei umformulieren.