Zahlen in Abhänigkeit addieren

nightcab

Grünschnabel
Hallo Leute!

Ich möchte Zahlen aus einem Textfeld addieren.
In meinem Script funktioniert das soweit.

etwa so:

Bier: € 3,50
Schitzel: € 7,50
Schnapps: € 5,50
Nachspeise: € 4,30
--------------------
Summe: € 20,80

Die Angaben werden im Textfeld ""Essen/Triken" eingegeben.
Die Preise im Textfeld "Preise" addiert.
Diese sind von 1-4 nummeriert.

Nun möchte ich aber, dass alles in Abhänigkeit des Wertes "Essen/Trinken" getrennt addiert wird.
Die Preise der Speisen sollen nun von den der Getränke getrennt ausgegeben werden.

Summe Trinken 10% = € 9,00
Summe Essen 20% = € 11,80
---------------------------------
TOTAL = € 20,80

Ich müsste also zuerst die Speisen und Getränke definieren, damit man sie getrennt addieren kann.

Ja und natürlich ist das nur ein verkürztes Beispiel. Das Script müsste ich dann um einige Posten vergrößern!

Bitte um Hilfe!!!

Javascript:
<html>
<head>
</head>
<body>
<form name="Essen/Trinken">
<script>



 function summe() {
         var essen1 = document.forms[0].elements['essen1'].value.replace(",",".");
         var essen2 = document.forms[0].elements['essen2'].value.replace(",",".");
         var essen3 = document.forms[0].elements['essen3'].value.replace(",",".");
         var essen4 = document.forms[0].elements['essen4'].value.replace(",",".");

        // var trinken1 = document.forms[0].elements['trinken1'].value.replace(",",".");
        // var trinken2 = document.forms[0].elements['trinken2'].value.replace(",",".");
        // var trinken3 = document.forms[0].elements['trinken3'].value.replace(",",".");
        // var trinken4 = document.forms[0].elements['trinken4'].value.replace(",",".");

         //----- was muss ich hier eintragen ??? ----


         document.forms[0].elements['zehn'].value = (essen1*1 + essen2*1 + essen3*1 + essen4*1).toFixed(2);
         document.forms[0].elements['zwanzig'].value = (trinken1*1 + trinken2*1 + trinken3*1 + trinken4*1).toFixed(2);
         }


</script>




<br><br><br>
<input  name="EssenTrinken1" type="text" style="width:120px" placeholder="Essen/Trinken1" />
<input name="essen1" onKeyUp="summe();"   type="text" class="right" style="width: 120px;" autocomplete="off" placeholder="Preis1"></input> <br>


<input  name="EssenTrinken2" type="text" style="width:120px" placeholder="Essen/Trinken2" />
<input name="essen2" onKeyUp="summe();"  type="text" class="right" style="width: 120px;" autocomplete="off" placeholder="Preis2"></input><br>


<input  name="EssenTrinken3" type="text" style="width:120px" placeholder="Essen/Trinken3" />
<input name="essen3" onKeyUp="summe();"   type="text" class="right" style="width: 120px;" autocomplete="off" placeholder="Preis3"></input> <br>


<input  name="EssenTrinken4" type="text" style="width:120px" placeholder="Essen/Trinken4" />
<input name="essen4" onKeyUp="summe();"  type="text" class="right" style="width: 120px;" autocomplete="off" placeholder="Preis4"></input><br><br>


<br><br>

<!-- Hier wird summiert -->
Summe Trinken 10%                 <input  name="zehn"    type="text" class="feld"  style="background:#FBB604; solid border:1px; width:120px" readonly  value="0.00" dir="rtl" /><br>
Summe Essen 20% &nbsp;&nbsp;&nbsp;<input  name="zwanzig" type="text" class="feld"  style="background:#FBB604; solid border:1px; width:120px" readonly  value="0.00" dir="rtl" />




</form>
</body>
</html>
 
Ich müsste also zuerst die Speisen und Getränke definieren
Du könntest z. B. jedem Eingabefeld zwei Radiobuttons zuordnen, wo man "Essen" oder "Trinken" auswählen kann.

Oder die Eingabefelder dynamisch anlegen mit zwei Buttons: "+ Essen" und + Trinken". Dann könntest Du gleich über eine Klasse definieren, ob es sich um "Essen" oder "Trinken" handelt, etwa so:
Code:
    <button onclick="add('essen', 'Essen');">+ Essen</button>
    <button onclick="add('trinken', 'Trinken');">+ Trinken</button>
    <form id="myform">

    </form>
    <script>
        function add(typ, txt) {
            var inp = document.createElement("input");
            inp.className = typ;
            var lbl = document.createElement("label");
            lbl.textContent = txt;
            document.getElementById("myform").appendChild(inp);
            document.getElementById("myform").appendChild(lbl);
        }
    </script>
 
Zuletzt bearbeitet:
Danke für Deine Antwort Sempervivum!

Mein Script hat 2 Vorteile.... wenn man so will.

1. Die statischen Textfelder bleiben nach einem Reload mit den eingegebenen Werten bestehen bzw. gespeichert (localStorage).
2. Für das Speichern dieser Inhalte habe ich eine statische ID Nummer vergeben. Diese Nummer habe ich im Beispiel nicht includiert.

Leider trifft das auf Deinen Code nicht zu. Aber danke für Deine Bemühungen!
 
Dieses:
Du könntest z. B. jedem Eingabefeld zwei Radiobuttons zuordnen, wo man "Essen" oder "Trinken" auswählen kann.
kannst Du aber in jedem Fall auf deinen Code anwenden.

Und Speichern in / Auslesen aus dem Localstorage ist bei meinem zweiten Script genau so möglich. Wobei die Bearbeitung wesentlich effizienter mit Schleifen möglich ist.
 
Zuletzt bearbeitet:
Zurück