Zum Inhalt springen
View in the app

A better way to browse. Learn more.
Fachinformatiker.de

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

Anfänger braucht Hilfe - Formularberechnung

Gast manuel1987
Gast manuel1987
in Webdesign

Empfohlene Antworten

Veröffentlicht

Hallo zusammen,

eine Frage zu javascript... Habe noch nie damit etwas gemacht und wollte nun eine Berechnung in einem Formular erstellen...

Darum geht es nur, dass die Felder "kosten", "zins" und "zuschlag" in das Ergebnisfeld "ergebnis" errechnet werden sollen.

Klappt bei mir aber nicht. Ihr könnt mir sicherlich sagen, was ich ändern muss.

Danke im Voraus. :D

<html>

  <head>

    <title>Formular</title>

  </head>

  <body>

  <script type="text/javascript">

function berechnen(f) {


var kosten = f.kosten.value;

var zins = f.zins.value;

var zuschlag = f.zuschlag.value;


f.ergebnis.value = kosten * zins + zuschlag;



}


</script>

    Formular: Einzeilige Eingabenfelder<p>

    <form>

        <p><input type=“text“ name=“kosten“>€ Kosten</p>

   	<p><input type=“text“ name=“zins“>Zinsen</p>

        <p><input type=“text“ name=“zuschlag“>Zuschlag</p>

	<p><input type="button" name="berechnen" value="Berechnung starten" onClick="berechnen" (this.form)></p>

   	<p><input type=“text“ name=“ergebnis“>Gesamt</p>


   </form>

  </body>

</html>

Ne, bringt leider auch nix...


<html>

  <head>

    <title>Formular</title>

	  <script type="text/javascript">

function berechnen() {


var kosten = document.kostenrechnung.kosten.value;

var zins = document.kostenrechnung.zins.value;

var zuschlag = document.kostenrechnung.zuschlag.value;


document.kostenrechnung.ergebnis.value = ""+kosten * zins + zuschlag;



}


</script>

  </head>

  <body>


    Formular: Einzeilige Eingabenfelder<p>

    <form name="kostenrechnung">

        <p><input type="text" name="kosten">€ Kosten</p>

   	<p><input type="text" name="zins">Zinsen</p>

        <p><input type="text" name="zuschlag">Zuschlag</p>

	<p><input type="button" value="Berechnung starten" onClick="javascript:berechnen();"></p>

   	<p><input type="text" name="ergebnis">Gesamt</p>


   </form>

  </body>

</html>

Hab es mal angepasst. Sollte jetzt auch funktionieren ;)

Hatte direkt deinen Quellcode übernommen und später beim testen festgestellt das es nicht funktionierte sowie ich es umgeschrieben hatte, bis mir dann auffiel das dein button genauso wie die function "berechnung" hiess. Nachdem ich das gelöscht hatte gunktionierte es einwandfrei. Bin nicht der beste in JavaScript aber ich hoffe eine der Pros könnten sich mal dazu äussern wie das ist wenn ein button und eine function den gleichen Namen haben. Soweit ich weiss sollte das nix machen ausmachen.

Gruss L0rdseth

document.kostenrechnung.ergebnis.value = ""+kosten * zins + zuschlag;

Das ist falsch, so hängst du zuerst (kosten*zins) und dann zuschlag an einen Leerstring an. Angenommen, alle drei Werte sind fünf, dann wird folgendes gemacht:

""+"5"*"5"+"5"

= ""+25+"5"

= "25"+"5"

= "255"

Um das zu umgehen, müssen Klammern um die Berechnung gesetzt werden. Das reicht allerdings noch nicht. kosten, zins und zuschlag sind Strings, da sie aus Formularfeldern übernommen werden. Die Multiplikation funktioniert, da wird automatisch gecastet, weil es für Strings keine Multiplikation gibt. Der letzte Wert wird allerdings wieder als String angehängt, weil "+" in Javascript der Konkatenations-Operator für Strings ist.

Entweder man castet also die Werte gleich bei der Initialisierung als Number() oder dann bei der Berechnung.

Bearbeitet von Toothrot

Das ist falsch, so hängst du zuerst (kosten*zins) und dann zuschlag an einen Leerstring an. Angenommen, alle drei Werte sind fünf, dann wird folgendes gemacht:

""+"5"*"5"+"5"

= ""+25+"5"

= "25"+"5"

= "255"

Um das zu umgehen, müssen Klammern um die Berechnung gesetzt werden. Das reicht allerdings noch nicht. kosten, zins und zuschlag sind Strings, da sie aus Formularfeldern übernommen werden. Die Multiplikation funktioniert, da wird automatisch gecastet, weil es für Strings keine Multiplikation gibt. Der letzte Wert wird allerdings wieder als String angehängt, weil "+" in Javascript der Konkatenations-Operator für Strings ist.

Entweder man castet also die Werte gleich bei der Initialisierung als Number() oder dann bei der Berechnung.

Inwiefern caste ich die Werte?

Ich würde es gleich beim Initialisieren machen. Ungefähr so:

var kosten = Number(document.kostenrechnung.kosten.value);

Erstelle ein Konto oder melde dich an, um einen Kommentar zu schreiben.

Zur Themenliste gehen

Configure browser push notifications
Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.