JavaScripts › Mathematik

Rechner zweier Zahlen

Verrechnet zwei Zahlen wahlweise per Addition, Subtraktion, Multiplikation, Division oder Potenz — und kennt auch die Kreiszahl Pi.

Bei diesem Javascript habt ihr die Möglichkeit, zwei Zahlen in ein Formular einzugeben. Anschließend werden diese Zahlen je nach angeklicktem Knopf miteinander verrechnet: addiert, subtrahiert, multipliziert, dividiert oder potenziert. Ein zusätzlicher Knopf gibt die Kreiszahl π aus — dafür braucht es gar keine Eingaben.

Tragt einfach in beide Felder je eine Zahl ein (Dezimalstellen mit Komma oder Punkt) und klickt auf die gewünschte Rechenart. Das Ergebnis erscheint sofort darunter. Mit „Reset" werden Felder und Ergebnis zurückgesetzt, und ihr könnt von vorn beginnen.

Beim Potenzieren ist die erste Zahl die Basis und die zweite der Exponent: 2 hoch 10 ergibt also 1024. Auch negative und gebrochene Exponenten funktionieren — 9 hoch 0,5 liefert die Quadratwurzel 3.

Wer lieber frei tippt statt zu klicken, findet im Archiv auch einen ausgewachsenen Taschenrechner; ganz ähnlich wie dieses Script arbeitet außerdem Zwei Zahlen berechnen.

Mathematik Baujahr 2009 läuft in deinem Browser

So funktioniert das Script

Das Script besteht aus einer Lesefunktion für die Eingabefelder, einer Ausgabefunktion, der eigentlichen Rechenfunktion und dem Verdrahten der Knöpfe. Alles ist in eine sofort ausgeführte Funktion gepackt, damit die Namen nicht mit anderen Scripts auf der Seite kollidieren.

function zahl(id) {
  return Number(document.getElementById(id).value.replace(",", "."));
}

Die Hilfsfunktion liest ein Eingabefeld aus und macht mit Number() eine echte Zahl daraus. Das ist wichtig, denn der Feldinhalt ist zunächst immer ein Text (String) — und bei Texten bedeutet + „aneinanderhängen": aus "2" + "3" würde "23" statt 5. Das replace(",", ".") davor tauscht ein deutsches Dezimalkomma gegen den Punkt, den JavaScript intern erwartet.

if (rechenart === "durch") {
  if (zahl2 === 0) {
    ausgabe.textContent = "Durch null könnt ihr nicht teilen.";
    return;
  }
  ergebnis = zahl1 / zahl2;
}

Die Rechenfunktion bekommt die gewünschte Rechenart als Text übergeben und wählt per if/else if die passende Rechnung. Die Division prüft vorher auf null — JavaScript würde sonst kommentarlos Infinity ausgeben. Potenzen berechnet Math.pow(zahl1, zahl2), und für π liefert die eingebaute Konstante Math.PI den Wert auf 15 Nachkommastellen genau.

const knoepfe = document.querySelectorAll("[data-rechenart]");
knoepfe.forEach(function (knopf) {
  knopf.addEventListener("click", function () {
    rechne(knopf.dataset.rechenart);
  });
});

Statt sechs fast identischer Funktionen (wie in ganz alten Scripts üblich) gibt es nur eine — und die Knöpfe tragen ihre Rechenart als data-rechenart-Attribut direkt im HTML. querySelectorAll() sammelt alle Elemente mit diesem Attribut ein, und jeder bekommt per addEventListener einen Klick-Horcher, der rechne() mit dem eigenen Attributwert aufruft. Über knopf.dataset.rechenart liest JavaScript das Attribut bequem aus.

document.getElementById("zr-reset").addEventListener("click", function () {
  document.getElementById("zr-zahl1").value = "";
  …
});

Der Reset-Knopf leert einfach beide Eingabefelder und die Ergebnisfläche. In der Urversion erledigte das ein <input type="reset"> im Formular — die ausgeschriebene Variante funktioniert aber auch ohne umschließendes <form>-Element.

Zum Anpassen: Eine weitere Rechenart ist schnell ergänzt — ein neuer Knopf mit z. B. data-rechenart="rest" und ein zusätzlicher Zweig else if (rechenart === "rest") { ergebnis = zahl1 % zahl2; } genügen schon.

Script für die eigene Homepage

Kopiert euch den kompletten Code und fügt ihn an der Stelle eurer Seite ein, an der das Script erscheinen soll. Er läuft ohne weitere Dateien und ohne fremde Server.

Mehr aus der Kategorie Mathematik