Zum Inhalt springen

Arbeiten mit input Feldern als Zahlen

Eine Eingabe eines Input-Feldes wird standardmäßig als Text verarbeitet. Daher sind für eine Bearbeitung mit Zahlen Aktionen erforderlich.

Ein einfaches Beispiel für die Arbeit mit 2 Eingaben:

  • Du gibst den beiden Input-Feldern eine ID.
  • Du gibst dem Ausgabefeld eine ID
  • Dein Button zur Bestätigung bekommt eine onClickFunction
<html><body>
<form>
    Bitte hier die erste zahl eingeben: <input type="text" name="wert1" id="wert1">
    <p>
        Und hier bitte die zweite Zahl eingeben: <input type="text" name="wert2" id="wert2">
    </p>
    Hier folgt der Button zum Starten des Scripts: <input type="button" value="Absenden" onclick="absenden">

</form>
</body></html>

Jetzt werden die Eingaben über das Script eingelesen.

<script>
    function absenden(){
    let variable1=document.getElementById("wert1").value;
    console.log(wert1);
    let variable2=document.getElementById("wert2").value;
    console.log(wert2);
    parsed=parseInt(variable1) + parseInt(variable2);
    alert(parsed);
    }
</script>

Durch den Befehl parseInt werden die Eingaben als Zahlen verarbeitet. Die Funktion parseInt wandelt ihr erstes Argument in einen String um, parst diesen String und gibt dann eine Ganzzahl oder NaN zurück.