Mehrfaches nutzen einer JS Funktion


#1
Hallo zusammen, gleich vorweg, bin noch nicht der Überflieger in Javascript und stehe noch etwas am Anfang. Aktuell erstelle ich ein Webformular, in welchem u.a. auch Berechnungen durchgeführt und in eine Datenbank geschrieben werden. Hierzu habe ich ein Javascript erstellt, in welchem Anhand von gekauften Waren direkt die zugehörigen Kosten ermittelt werden:
HTML:
<script type="text/javascript">
      <!--
        function form_ral451()
        {
           
            var wert1          = Number(document.getElementById('wert1').value);
            var wert2          = Number(document.getElementById('wert2').value);
           
            var resultField1   = document.getElementById('result1');
            var resultField2   = document.getElementById('result2');
          
            var result1        = wert2*wert1;
           
          
            resultField1.value = result1;
           
        }
      -->
    </script>
Die Werte kommen aus dem Formular, wobei Wert 2 jeweils fix ist, Wert 1 wird durch den User eingegeben, die Ausgabe erfolgt dann direkt im Anschluß

HTML:
<label for="wert1">Wieviel Liter Farbe RAL 451?</label><input type="text" name="wert1" id="wert1" onkeyup="form_ral451();"><br>
<label for="wert2">Kosten pro Liter</label><input type="text" name="wert2" id="wert2" value="20" onkeyup="form_ral451();"><br>
<br>
<label for="result1">Gesamtkosten:</label><input type="text" name="result1" id="result1" readonly><br>
Jetzt habe ich das Thema das mehrere Farbgruppen auf diese Weise berechnet werden müssten. Daher meine Frage, muß ich für jede Farbgruppe eine entsprechende Funktion erstellen oder kann ich jeweils aus der Eingabe des Users heraus die vorhandene Funktion nutzen und nur die input type name und id anpassen ? Wie mache ich das dann in der Funktion das auch die anders benannten input variablen berechnet und korrekt zurückgemeldet werden ?

Die Berechnungen wären immer die gleichen, es ändert sich jeweils nur der fixe Wert2 und die Eingabe Wert1.

Danke euch im voraus für eure Unterstützung und Hilfe
 
Zuletzt bearbeitet von einem Moderator:

Sempervivum

Erfahrenes Mitglied
#2
Das Problem kannst Du lösen, indem Du die IDs der Eingabefelder als Parameter an die Funktion übergibst:
Code:
function form_ral(idwert1, idwert2, idresult)
{

var wert1 = Number(document.getElementById(idwert1).value);
var wert2 = Number(document.getElementById(idwert2).value);

var resultField1 = document.getElementById(idresult);

var result1 = wert2*wert1;


resultField1.value = result1;

}

form_ral('wert1', 'wert2', 'result1');
 
#3
Hallo nochmal und vielen Dank für deine Antwort. Habe das mit meinem gefährlichen bisherigen Halbwissen versucht umzusetzen, klappt jedoch leider nur bei der ersten Berechnung. So ganz hab ich das mit den ID´s wohl noch nicht verstanden, vor allem was die ID des Ergebnis angeht. Wäre dir dankbar wenn du mir da noch unter die Arme greifen könntest.

HTML:
<label for="ral451">Wieviel Liter Farbe RAL 451?</label><input type="text" name="ral451" id="idwert1" onkeyup="form_ral();"><br>
        <label for="ral451">Kosten pro Liter</label><input type="text" name="ral451" id="idwert2" value="20" onkeyup="form_ral();"><br>
        <br>
        <label for="ral451">Gesamtkosten:</label><input type="text" name="e_ral451" id="idresult" readonly><br>
        <br><br>
        <label for="ral452">Wieviel Liter Farbe RAL 452?</label><input type="text" name="ral452" id="idwert3" onkeyup="form_ral();"><br>
        <label for="ral452">Kosten pro Liter</label><input type="text" name="ral452" id="idwert4" value="30" onkeyup="form_ral();"><br>
        <br>
        <label for="ral452">Gesamtkosten:</label><input type="text" name="e_ral452" id="idresult" readonly><br>
Dank dir vielmals
 

Sempervivum

Erfahrenes Mitglied
#4
Da gibt es jetzt zwei Probleme:
1. Du hast bei der Umsetzung dieses nicht berücksichtigt: form_ral('wert1', 'wert2', 'result1');, d. h. Du musst die betr. Werte auch an die Funktion übergeben, z. B.:
onkeyup="form_ral('wert1', 'wert2', 'result1');".
Und den Ergebnisfeldern eine eindeutige ID geben, d. h. "result1", "result2".
Jetzt erwarte ich, dass Du nicht nur die Gesamtkosten pro Farbe berechnen willst, sondern auch die Gesamtkosten für alle Farben. Das wäre dann der nächste Schritt, ich schlage vor, dass Du zunächst mal dieses umsetzt.
 

Neue Beiträge