In diesem Beispiel werden vier Textfelder und ein Button angelegt. Die Werte innerhalb der Textfelder werden mittels JavaScript ausgelesen und miteinander verrechnet. Das Ergebnis wird in einem Textfeld ausgegeben. Vor der Berechnung findet eine Prüfung der Werte statt (Punkt als Dezimaltrenner, keine Buchstaben verwendet). Im Anschluss an die Berechnung werden die Werte kaufmännisch auf zwei Nachkommastellen gerundet.

Anleitung

HTML

• Formular mit name-Attribut vergeben: <form name="formular>...</form>
• 4 Textfelder erstellen: <input type="text" name="betrag" />
• 1 Button erstellen: <button type="button" onclick="rechnen()">Berechnen</button>

JavaScript

• Funktion anlegen: function rechnen(){...}
  • Funktionsaufruf: pruefen(document.formular.betrag.value);
  • IF-Bedingung:

    if (formular.mwstsatz.value > 19) {
        alert("Bitte geben Sie einen korrekten Mehrwertsteuersatz ein.");
    }

    Hier wird geprüft, ob der Wert, der als Mehrwertsteuersatz eingetragen ist, kleiner ist als 19. Ist dies nicht der Fall, bekommt der Nutzer eine Meldung angezeigt.

  • ELSE:

    else {
        mwstbetrag = formular.betrag.value * formular.mwstsatz.value / 100;
        mwstbetrag = runden(mwstbetrag);
        formular.mwsteuro.value = mwstbetrag;
        gesamtbetrag = parseFloat(formular.betrag.value) + parseFloat(mwstbetrag);
        formular.betragnetto.value = runden(gesamtbetrag);
    }

    Ist die IF-Bedingung nicht erfüllt, d. h. der Wert ist kleiner als 19, wird die Berechnung ausgeführt. Dazu wird zuerst der Mehrwertsteuerbetrag berechnet und auf zwei Nachkommastellen gerundet. Der gerundete Betrag wird dann in das entsprechende Textfeld geschrieben.
    Anschließend wird der Gesamtbetrag (Betrag + Betrag Mehrwertsteuer) berechnet. Wichtig ist dabei, dass die Eingaben mittels parseFloat in Zahlen umgewandelt werden. Der Gesamtbetrag wird als gerundete Zahl in das entsprechende Textfeld geschrieben.

• Funktion anlegen: function runden(wert){...}
  • Diese Funktion rundet die Werte, die übergeben werden, kaufmännisch auf zwei Nachkommastellen.
  • Dazu wird eine Variable angelegt: zahl = wert.toFixed(2);
  • Der berechnete Wert wird von der Funktion an den Funktionsaufruf zurückgegeben: return zahl;
• Funktion anlegen: function pruefen(gleitkommazahl){...}
  • Diese Funktion prüft die Eingabe im Formularfeld für den Betrag.
  • Prüfen, ob ein Komma als Dezimaltrenner verwendet wurde

    var ergebnis = gleitkommazahl.match(/\b,\b|\b \b/);
    
    if ((ergebnis == ",") || (ergebnis == " ")) {
        alert("Bitte verwenden Sie als Dezimaltrenner einen Punkt statt eines Kommas.");
    }

  • Prüfen, ob Buchstaben eingegeben wurden:

    var buchstaben = /([A-Za-z])/;
    
    if (buchstaben.exec(gleitkommazahl)) {
        alert("Bitte geben Sie keine Buchstaben ein.");
    }