Zahlenformat in Java Rechnung

[Gunnar Bittersmann]

@@betking99

document.addEventListener('DOMContentLoaded', function () {
    function rechne() {
        var bnahrung = document.getElementById('bnahrung'),
            bholz = document.getElementById('bholz'),
            bsilber = document.getElementById('bsilber');
        bspnahrung = document.getElementById('bspnahrung');
        bspholz = document.getElementById('bspholz');
        bsilber = document.getElementById('bsilber');
        var summe = bnahrung.valueAsNumber / 1000 + bholz.valueAsNumber * 3 / 160 + bsilber.valueAsNumber * 5 / 40 + bspnahrung.valueAsNumber * 1500 + bspholz.valueAsNumber * 4500 + bspsilber.valueAsNumber * 7500;
        summe = summe.toFixed(0);                      
        document.getElementById('betrag1').value = summe;
    }
    document.getElementById("myForm1").addEventListener("input", rechne);

});

1. Die Elemente im DOM ändern sich doch nicht, oder? Es macht also keinen Sinn, die Elemente bei jedem Aufruf der Eventhandlerfunktion rechne() immer und immer wieder mit document.getElementById() herauszusuchen. Das müsste einmalig geschehen, also außerhalb von rechne().

   Globale Variablen sind auch keine gute Idee. (bnahrung, bholz, bsilber sind bei dir lokal – so wie’s sein soll –; bspnahrung, bspholz, bsilber sind ohne Schlüsselwort var global.)

   Mittlerweile gibt es die Schlüsselwörter let und const, die bevorzugt anstelle von var zu verwenden sind.

   BTW, mit summe = summe.toFixed(0); halte ich für schlechten Programmnierstil. Du weist du der Variablen summe einen neuen Wert zu, und zwar von einem völlig anderen Typ (String) als dem, den sie vorher hatte (Number). Sowas würde ich vermeiden.

2. macht es keinen Sinn, die Elemente im gesamten DOM zu suchen. Du rufst sowieso document.getElementById("myForm1") auf; das kann man sich in einer Variablen merken und die anderen Elemente müssen nur darin gesucht werden:

   const myForm1 = document.getElementById('myForm1');
   const bnahrung = myForm1.getElementById('bnahrung');
   const bholz = myForm1.getElementById('bholz');
   

3. macht es keinen Sinn, die Elemente überhaupt zu suchen. Wenn das form-Element und die darin enthaltenen Eingabe-Elemente name-Attribute tragen (was sie tun sollten), dann liegen bereits Referenzen zu diesen vor:

   <form name="myForm1">
     <label for="bnahrung">Nahrung:</label>
     <input name="bnahrung" id="bnahrung"/>
     ⋮
   </form>
   

   Das form-Element ist per document.forms['myForm1'] verfügbar; ohne dass man nochmal danach suchen müsste.

   Eingabe-Elemente per document.forms['myForm1'].elements['bnahrung'] usw.

   Beachte, dass das Eingabe-Element name- und id-Attribute hat. Die Zuordnung der Beschriftung (for-Attribut des label-Elements`) bezieht sich auf die ID.

🖖 Stay hard! Stay hungry! Stay alive! Stay home!