Mit Javascript rechnen - Neues Projekt 3

Demo Shop
HalloLogout
Demo Shop
Direkt zum Seiteninhalt
Kleine Tabelle mit automatischer Addition (Javascript)
Ein Javascript, das die Zahlen in den Eingabfeldern der Tabelle automatisch addiert.



Zum Testen


Bezeichnung 1  
Bezeichnung 2  
Bezeichnung 3  
Bezeichnung 4  
Bezeichnung 5  
   S u m m e   
Hinweise:

Bei Eingabe von negativen Zahlen werden diese subtrahiert.

Statt des Kommas den Dezimalpunkt 12.99 verwenden.

Gelegentlich gibt es bei Zahlen mit Dezimalpunkt einen Rundungsfehler.

Bei Fehlerhafte Eingabe unter 1 bis 5 wird bei Summe "NaN" angezeigt.


Verwendeter Code in einem HTML-Objekt:

<script>
   function zaehler() {
     var WertA = document.Form5.zahl1.value;
     var WertB = document.Form5.zahl2.value;
     var WertC = document.Form5.zahl3.value;
     var WertD = document.Form5.zahl4.value;
     var WertE = document.Form5.zahl5.value;
     document.Form5.ausgabe.value = WertA*1 + WertB*1 + WertC*1 + WertD*1 + WertE*1;
   }
</script>

<h3>Zum Testen</h3><br>
<form name="Form5" action="">
   <table style="margin-left: auto; margin-right: auto;">
     <tr>
       <td>Bezeichnung 1 &nbsp;</td>
       <td align=right><input type=text name="zahl1" size=3 onKeyUp="zaehler();"> €</td>
     </tr>
     <tr>
       <td>Bezeichnung 2 &nbsp;</td>
       <td align=right><input type=text name="zahl2" size=3 onKeyUp="zaehler();"> €</td>
     </tr>
     <tr>
       <td>Bezeichnung 3 &nbsp;</td>
       <td align=right><input type=text name="zahl3" size=3 onKeyUp="zaehler();"> €</td>
     </tr>
           <tr>
       <td>Bezeichnung 4 &nbsp;</td>
       <td align=right><input type=text name="zahl4" size=3 onKeyUp="zaehler();"> €</td>
     </tr>
           <tr>
       <td>Bezeichnung 5 &nbsp;</td>
       <td align=right><input type=text name="zahl5" size=3 onKeyUp="zaehler();"> €</td>
     </tr>
     <tr>
       <td colspan=2 style="border-top: double 3px #000000;"><b>&nbsp;&nbsp; S u m m e &nbsp;&nbsp;</b> <input type=text name="ausgabe" size=3> €
       </td>
     </tr>
   </table>
</form>


Anmerkungen:

Der angezeigte Code auf der verlinkten Webseite war unvollständig, deshalb habe ich den kompletten Code aus der Quelltextansicht kopiert und für mein Beispiel um 2 Zeilen erweitert, bei <table> eine CSS-Anweisung für die zentrierte Anzeige hinzugefügt und die Bezeichnungen der Felder geändert.

Zurück zum Seiteninhalt