So mein Freund,
ich machs jetzt etwas ausführlicher anhand eines ersten Beispiels. Von da an solltest alles Werkzeug haben das du brauchst um den Rest auch zu implementieren.
Du möchtest die Anzahl der Stunden mit dem Stundensatz multiplizieren und das Ergebnis in dem Inputfeld "Zwischensumme" anzeigen. Dazu fehlen dir erstmal ein Paar Dinge.
- Du musst den einzelnen Elementen ID's verpassen damit du sie im Skript ansprechen kannst.
Den "Input" für Stunden nennen wir "StundenInput", also id="StundenInput". Sieht also so aus:
Code:
<input id="StundenInput" type="text" name="stunden" placeholder="Geben Sie hier die Stundenzahl ein.">
Das gleiche gilt für den Stundensatz, den nennen wir "StundensatzInput", id="StundensatzInput". Also:
Code:
<input id="StundensatzInput" type="text" name="stundensatz" placeholder="Geben Sie hier den Stundensatz ein.">
Letzendlich machen wir das auch für das Zwischensummenelement und nennen es "ZwischensummeInput", id="ZwischensummeInput":
Code:
<input id="ZwischensummeInput" type="text" name="zwischensumme_1">
- Der nächste Schritt ist, wir führen eine Funktion ein die eine Zwischensumme berechnet und diese dann in das Element "ZwischensummeInput" schreibt.
Die Funktion nennen wir "BerechneVerguetung" und das sieht im Skriptblock so aus:
Code:
<script type="text/javascript">
function BerechneVerguetung()
{
}
</script>
- Jetzt wollen wir, dass diese Funktion ausgelöst wird wenn der Benutzer auf den Button mit der Id "berechnen" klickt.
Hierzu fügen wir wieder im entsprechenden HTML-Element einen
onclick-Handler ein. Dieser besagt welche Skriptfunktion ausgeführt werden soll wenn der Button gedrückt wird. In unserem Fall ist es die Funktion "BerechneVerguetung". dementsprechend sieht der Button jetzt so aus:
Code:
<button type="button" id="berechnen" onclick="BerechneVerguetung();">Vergütung berechnen</button>
- Der letzte Schritt wäre, die Logik in der Funktion zu implementieren, die die eigentliche Berechnung ausführt.
Dazu müssen folgende Dinge passieren:
- Wir brauchen den eingegebenen Wert aus dem "StundenInput".
- Wir brauchen den eingegebenen Wert aus dem "StundensatzInput".
- Wir müssen die beiden Werte multiplizieren.
- Das Ergebnis der Multiplikation muss dem Element "ZwischensummeInput" als Wert zugewiesen werden.
Damit wir das alles machen können müssen wir die einzelnen Elemente anhand ihrer Id auslesen und in Variablen speichern. Das geht in JavaScript ganz leicht mit der Funktion "getElementById()". Da müssen wir lediglich die Id des gewünschten Elements angeben. So würde es aussehen wenn wir alle drei involvierten Elemente in Variablen speichern:
Code:
function BerechneVerguetung()
{
var x = document.getElementById("StundenInput");
var y = document.getElementById("StundensatzInput");
var z = document.getElementById("ZwischensummeInput");
}
Als nächstes erstellen wir eine Variable "output", darin speichern wir das Ergebnis der Multiplikation. Für die Berechnung rufen wir die Attribute "value" der Elemente "x" und "y" auf und multiplizieren diese:
Code:
var output = x.value * y.value;
Fast geschafft, jetzt gilt es nur noch dem Element "ZwischensummeInput" ("z" im Skript) zuzuweisen:
Anmerkung: Die letzten zwei Schritte hätte man auch in einer Zeile implementieren können, ich habe das für ein besseres Verständnis in zwei Schritte aufgeteilt.
Am Ende sieht deine JavaScript-Funktion so aus:
Code:
function BerechneVerguetung()
{
var x = document.getElementById("StundenInput");
var y = document.getElementById("StundensatzInput");
var z = document.getElementById("ZwischensummeInput");
var output = x.value * y.value;
z.value = output;
}
Mit diesem Wissen sollte es kein Problem für dich sein auch den Rest zu implementieren.
Mehr Anmerkungen: Natürlich erwartet hier das Skript, dass sich in den jeweiligen Eingabefeldern auch tatsächlich Werte befinden die sich multiplizieren lassen, sonst kommt Bullshit bei raus, bzw. nichts
Ich hoffe das hilft,
Gruß
)
