Javascript Funktionen und Formular-Daten

30.01.2017 09:31 Uhr

Diese zwei Dateien sorgen für ein Auslesen der Daten aus HTML-Formular-Feldern. Die Felder sind jeweils mit dem id-Attribut gekennzeichnet. Damit ist ein Zugriff auf diese Felder mit dem javascript-Konstrukt „document.getElementById“ möglich. Die ausgelesenen Daten sind immer Texte und müssen in unserem Beispiel mit „parseInt“ in Zahlen umgewandelt werden. Danach ist eine Berechnung der Zahlen möglich. Wie Sie sehen, eignet sich das Konstrukt „document.getElementById“ auch dazu, die Daten wieder in das Feld zurückzuschreiben.

Datei start.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Javascript Start</title>
    <script src="script.js"></script>

</head>
<body>

<h1>Javascript - Erste Scripts</h1>

<form>

    Zahl 1: <input id="zahl1" type="text" value=""><br />
    Zahl 2: <input id="zahl2" type="text" value=""><br />
    <button type="button" onclick="rechne()">multiplizieren</button><br />
    Ergebnis: <input id="ergebnis" type="text" value=""><br />

</form>

</body>
</html>

Datei script.js

function multi(zahl1, zahl2) {

    var meinErg = parseInt(zahl1) * parseInt(zahl2);
    return meinErg;
    // return parseInt(zahl1) * parseInt(zahl2);

}


function rechne() {

    var feld1 = document.getElementById("zahl1").value;
    var feld2 = document.getElementById("zahl2").value;


    var mulErg = multi(feld1, feld2);
    document.getElementById("ergebnis").value = mulErg;
    // alert(mulErg);

    return true;

}