Beliebige Wurzel ziehen

So funktioniert das Script

Das Script besteht aus vier Abschnitten: Es liest die beiden Eingabefelder aus, prüft sie auf Sinn, rechnet die Wurzel und baut daraus eine Ausgabe in mathematischer Schreibweise. Alles 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 kleine Hilfsfunktion holt sich ein Eingabefeld über seine id, liest den eingetippten Text und macht daraus mit Number() eine Zahl. Das replace(",", ".") davor tauscht ein deutsches Dezimalkomma gegen einen Punkt — JavaScript versteht intern nur die englische Schreibweise, aus "2,5" muss also erst "2.5" werden. 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.

if (isNaN(wurzelzahl) || isNaN(grad)) {
  ausgabe.textContent = "Bitte tragt in beide Felder eine Zahl ein.";
  return;
}
if (grad === 0) {
  ausgabe.textContent = "Eine nullte Wurzel gibt es nicht — bitte einen Grad ungleich 0 eintragen.";
  return;
}

Vor dem Rechnen wird geprüft. isNaN() steht für „is Not a Number" und schlägt an, wenn in einem Feld etwas steht, das keine Zahl ergibt. Der Grad 0 wird eigens abgefangen, denn er würde im nächsten Schritt zu einer Division durch null führen. return beendet die Funktion sofort, es wird also gar nicht erst weitergerechnet. Das Original setzte ungültige Eingaben stillschweigend auf 1 — ein Hinweis ist verständlicher.

const ergebnis = Math.pow(wurzelzahl, 1 / grad);

Das ist der Kern des Scripts, und er nutzt einen schönen mathematischen Zusammenhang: Die n-te Wurzel einer Zahl ist dasselbe wie diese Zahl hoch 1/n. Math.pow(a, b) rechnet „a hoch b", also ergibt Math.pow(81, 1/4) genau die vierte Wurzel aus 81. Eine eigene Wurzelfunktion braucht es deshalb nicht — Math.sqrt() wäre nur der Sonderfall Math.pow(zahl, 1/2).

if (!Number.isFinite(ergebnis)) {
  ausgabe.textContent = "Aus einer negativen Zahl lässt sich diese Wurzel nicht ziehen.";
  return;
}

Number.isFinite() ist nur dann wahr, wenn eine echte, endliche Zahl herausgekommen ist. Bei der Quadratwurzel aus −9 etwa liefert die Rechnung NaN, weil es im Bereich der reellen Zahlen keine Lösung gibt. Statt dieses kryptische NaN auszugeben, erscheint hier ein verständlicher Satz.

const gerundet = Number(ergebnis.toPrecision(12));
ausgabe.innerHTML =
  "<sup>" + grad + "</sup>√<span style=\"text-decoration: overline\">" + wurzelzahl + "</span> = <strong>" +
  gerundet.toLocaleString("de-DE", { maximumFractionDigits: 10 }) + "</strong>";

Hier entsteht die Anzeige. toPrecision(12) beseitigt die üblichen Rundungsreste des Computers: Die dritte Wurzel aus 125 ergibt intern 4,999999999999999 — nach dem Runden auf zwölf geltende Stellen steht dort wieder eine glatte 5. toLocaleString("de-DE") schreibt das Ergebnis anschließend in deutscher Schreibweise mit Komma. Weil die Ausgabe per innerHTML gesetzt wird, darf sie HTML enthalten: <sup> stellt den Wurzelgrad hoch, und der Überstrich über der Zahl entsteht durch text-decoration: overline — zusammen ergibt das die Schreibweise, die man aus dem Matheheft kennt.

document.getElementById("bw-ziehen").addEventListener("click", wurzelZiehen);

Zum Schluss wird die Funktion mit dem Knopf verbunden. Das Script steht dafür unter dem Formular, damit Felder und Knopf schon existieren, wenn diese Zeile läuft.

Zum Anpassen: Die Vorbelegung ändert ihr in den value-Attributen der beiden Felder. Mehr oder weniger Nachkommastellen bekommt ihr über maximumFractionDigits. Und wer die mathematische Schreibweise nicht braucht, ersetzt die ganze innerHTML-Zeile durch etwas Schlichtes wie ausgabe.textContent = "Die " + grad + ". Wurzel von " + wurzelzahl + " ist " + gerundet;.