# Fahrtkostenrechner



## Hag2bard (20. Dez 2022)

Ich habe hier einen kleinen Fahrtkostenrechner programmiert in HTML/JS programmiert.
Leider gefallen mir noch einige Sachen noch nicht:



Einerseits gefällt mir das Design nicht, da die Boxen direkt am Text dran sind.
Andererseits stört es mich, dass ich Zahlen mit punkt als Trennung angeben muss.

Ich brauche dieses Tool nur als Mittel zum Zweck, ich wollte mich nicht unbedingt mit CSS, JS und HTML beschäftigen.
Gibt es die Möglichkeit das ganze noch zu verschönern?

Danke schonmal im Voraus und freundliche Grüße


Hier noch der Code:

```
<!DOCTYPE HTML>
<html>

<head>
    <title>Fahrtkostenrechner</title>
    <meta name="description" content="Fahrtkostenrechner">
    <script type="text/javascript">
        function calc() {
            var wertEntfernungKunde = document.getElementById('entfernungKunde').value;
            console.log(wertEntfernungKunde);
            var wertDauertFahrt = document.getElementById('dauertFahrt').value;
            console.log(wertDauertFahrt);
            var summePersonalkostenAnfahrt = (wertDauertFahrt * 30.00);
            console.log(summePersonalkostenAnfahrt);
            var summeFahrzeugkostenAnfahrt = (wertEntfernungKunde * 0.32);
            console.log(summeFahrzeugkostenAnfahrt);
            var summeGesamt = (summePersonalkostenAnfahrt + summeFahrzeugkostenAnfahrt);
            console.log(summeGesamt);
            document.getElementById('fahrzeugkostenAnfahrt').value = summeFahrzeugkostenAnfahrt;
            document.getElementById('personalkostenAnfahrt').value = summePersonalkostenAnfahrt;
            document.getElementById('sum').value = summeGesamt;
        }
    </script>
</head>

<body>
    <form name="calC">

        <label type="text">Entfernung zum Kunden: </label>
        <input type='text' id='entfernungKunde' size="5" maxlength="5">
        <br><br>
        <label type="text">Dauer der Anfahrt (Stunden): </label>
        <input type='text' id='dauertFahrt' size="5" maxlength="5">
        <br><br>
        <label type="text">Fahrzeugkosten pro Kilometer: 0.32€</label>
        <br><br>
        <label type="text">Fahrzeugkosten Anfahrt: </label>
        <input type="text" id='fahrzeugkostenAnfahrt' size="5" maxlength="5" disabled>
        <br><br>
        <label type="text">Stundensatz für Anfahrt (€/h): 30.00</label>
        <br><br>
        <label type="text">Personalkosten gemäß Dauer der Anfahrt: </label>
        <input type="text" id='personalkostenAnfahrt' size="5" maxlength="5" disabled>
        <br><br>
        <label type="text">Fahrtkosten-Gesamt: </label>
        <input type='text' id='sum' size="5" maxlength="5" disabled> <br><br>
        <input type="button" name="Submit" value="Berechne Fahrtkosten" onclick="calc();">

    </form>
</body>

</html>
```


----------



## Oneixee5 (20. Dez 2022)

Wie wäre es damit?

```
<input name="myinput" value="0" step="0.01" lang="de-DE" type="number">
```









						<input>: The Input (Form Input) element - HTML: HyperText Markup Language | MDN
					

The <input> HTML element is used to create interactive controls for web-based forms in order to accept data from the user; a wide variety of types of input data and control widgets are available, depending on the device and user agent. The <input> element is one of the most powerful and complex...




					developer.mozilla.org
				











						W3Schools online HTML editor
					

The W3Schools online code editor allows you to edit code and view the result in your browser



					www.w3schools.com


----------

