Zwei Zahlen berechnen

So funktioniert das Script

Das Script hat vier kleine Bausteine: eine Funktion, die ein Eingabefeld als Zahl liest, eine, die ein Ergebnis lesbar formatiert, eine, die daraus eine Tabellenzeile baut, und die eigentliche Rechenfunktion, die alles zusammensetzt. Diese Aufteilung ist typisch — jede Funktion kann für sich verstanden und geändert werden. Das Ganze steckt in einer sofort ausgeführten Funktion, damit die Namen darin nicht mit anderen Scripts auf der Seite kollidieren.

function zahl(id) {
  const text = document.getElementById(id).value.trim().replace(",", ".");
  return text === "" ? NaN : Number(text);
}

Diese Hilfsfunktion holt ein Eingabefeld über seine id, liest den eingetippten Text und macht daraus mit Number() eine echte Zahl. Das replace(",", ".") davor tauscht ein deutsches Dezimalkomma gegen einen Punkt, weil JavaScript intern nur die englische Schreibweise versteht. Wichtig ist die Umwandlung auch aus einem zweiten Grund: Der Wert eines Eingabefeldes ist immer Text, und "8" + "6" ergäbe die Zeichenkette "86" statt der Zahl 14. Das Original half sich damals mit dem Trick s*1 + t*1 — eine Multiplikation mit 1 erzwingt die Umwandlung in eine Zahl. Mit Number() ist dieselbe Absicht direkt zu lesen. Der trim()-Aufruf entfernt versehentliche Leerzeichen, und ein leeres Feld liefert ausdrücklich NaN zurück — ohne diese Abfrage würde Number("") nämlich die Zahl 0 ergeben und das Script stillschweigend mit einer Null rechnen, die niemand eingetippt hat.

function formatiere(wert) {
  if (!Number.isFinite(wert)) {
    return "nicht definiert";
  }
  return Number(wert.toPrecision(12)).toLocaleString("de-DE", { maximumFractionDigits: 6 });
}

Number.isFinite() fängt den Fall ab, dass durch null geteilt wurde — das Ergebnis wäre Infinity, und in der Tabelle steht stattdessen „nicht definiert". toPrecision(12) entfernt die typischen Rundungsreste des Computers, und toLocaleString("de-DE") schreibt die Zahl in deutscher Schreibweise mit Komma und Tausenderpunkten. maximumFractionDigits: 6 begrenzt die Nachkommastellen, damit ein Quotient wie 8 ÷ 6 nicht als endlose Ziffernkette erscheint.

function zeile(beschriftung, wert) {
  return "<tr><td>" + beschriftung + "</td><td><strong>" + formatiere(wert) + "</strong></td></tr>";
}

Diese Funktion baut aus einer Beschriftung und einem Wert eine fertige Tabellenzeile als Text zusammen. Sie nimmt zwei Parameter entgegen — Werte, die beim Aufruf mitgegeben werden — und gibt mit return das Ergebnis zurück. Ohne sie müsste dieselbe HTML-Konstruktion viermal untereinander im Code stehen; so ist sie einmal beschrieben und wird viermal benutzt.

if (s === t) {
  ausgabe.textContent = "Bitte verschiedene Zahlen auswählen!";
  return;
}

Das ist die Eigenheit des Einsenders: Bei zwei gleichen Zahlen wird nicht gerechnet. Die drei Gleichheitszeichen bedeuten „gleicher Wert und gleicher Datentyp" — die strikte Prüfung, die man in JavaScript den beiden Gleichheitszeichen des Originals vorziehen sollte. Wollt ihr die Sperre loswerden, löscht ihr diese vier Zeilen einfach; das Script rechnet dann auch 5 und 5 durch.

ausgabe.innerHTML =
  "<table class=\"w-tabelle\"><tbody>" +
  zeile("Zahl 1 plus Zahl 2", s + t) +
  zeile("Zahl 1 mal Zahl 2", s * t) +
  zeile("Zahl 1 minus Zahl 2", s - t) +
  zeile("Zahl 1 geteilt durch Zahl 2", s / t) +
  "</tbody></table>";

Hier laufen alle Teile zusammen: Vier Rechnungen werden nacheinander an zeile() übergeben, die Rückgaben mit + zu einem einzigen langen Text verkettet und schließlich per innerHTML in die Ausgabefläche gesetzt. Genau an dieser Stelle stand im Original ein halbes Dutzend document.write-Aufrufe — die schreiben nur während des Ladens der Seite an die richtige Stelle und würden eine fertige Seite beim Klick auf einen Knopf vollständig überschreiben.

Zum Anpassen: Eine fünfte Rechnung ergänzt ihr mit einer weiteren zeile(…)-Zeile — zeile("Zahl 1 hoch Zahl 2", Math.pow(s, t)) etwa. Die Beschriftungen der Felder stehen im HTML, die Vorbelegung in deren value-Attributen.