Anfänger - Funktionen

Kaulano · 02. Sep. 2020

Hallo zusammen,
ich arbeite mich gerade in Funktionen ein und stoße auf das folgende Problem. Ich möchte eine Kalkulation des Öfteren verwenden, was mit der nachfolgenden Funktion und dem Event onchange auch schon gut funktioniert. Allerdings glaube ich, dass es hier eine elegantere Methode gibt (bin noch JS-Anfänger, kein jQuery, ...), wie man dies schreiben könnte.
Zudem würde ich die Funktion gerne auch schon im body als onload ergänzen, allerdings würde dies nur funktionieren, wenn ich sowohl Kalkulation 1 + Kalkulation 2 (class) eintippe. Geht doch bestimmt auch einfach, richtig?
Vielleicht hat hier jemand Tipps für mich, vielen Dank auf jeden Fall schon mal

HTML:

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Titel</title>
    <style>
      .calculation {
        margin-bottom: 10px;
      }
      .wrapper {
        display: inline;
      }
      .field {
        width: 50px;
        background-color: wheat;
      }
    </style>
  </head>
  <body onload="">
    
    <div class="calculation1">
      <div class="wrapper">
        <input class="field" type="number" id="factor1a" value="2" onchange="myCalculation(parseFloat(document.getElementById('factor1a').value), parseFloat(document.getElementById('factor1b').value), result1c)">
      </div>
      <div class="wrapper">
        <input class="field" type="number" id="factor1b" value="3" onchange="myCalculation(parseFloat(document.getElementById('factor1a').value), parseFloat(document.getElementById('factor1b').value), result1c)">
      </div>
      <div class="wrapper">
        <span class="field" id="result1c"></span>
      </div>
    </div>
    
    <div class="calculation2">
      <div class="wrapper">
        <input class="field" type="number" id="factor2a" value="4" onchange="myCalculation(parseFloat(document.getElementById('factor2a').value), parseFloat(document.getElementById('factor2b').value), result2c)">
      </div>
      <div class="wrapper">
        <input class="field" type="number" id="factor2b" value="5" onchange="myCalculation(parseFloat(document.getElementById('factor2a').value), parseFloat(document.getElementById('factor2b').value), result2c)">
      </div>
      <div class="wrapper">
        <span class="field" id="result2c"></span>
      </div>
    </div>
    
  </body>
  
  <script>
    function myCalculation(fac1, fac2, res3) {
      var sum = fac1 + fac2;
      res3.innerHTML = sum;
    }
  </script>
</html>

Viele Grüße
Markus

kkapsner · 02. Sep. 2020

Als erstes würde ich mich nicht darauf verlassen, dass Elemente mit ID als globale Variablen verfügbar sind: result1c -> document.getElementById("result1c")

Dann sind Funktionen fragwürdig, deren Aufruf länger ist als wenn man den Code direkt dort hinschreibt. Bei dir ist der Funktionsaufruf 133 Zeichen lang - ausgeschrieben sind es 129 (

result1c.innerHTML = parseFloat(document.getElementById('factor1a').value + parseFloat(document.getElementById('factor1b').value)

).

Es ist auch sinnvoll, wenn du Darstellung und Funktionalität etwas entkoppelts. D.h. du solltest deine Event-Listener nicht direkt im HTML definieren, sondern besser im Script:

HTML:

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Titel</title>
    <style>
      .calculation {
        margin-bottom: 10px;
      }
      .wrapper {
        display: inline;
      }
      .field {
        width: 50px;
        background-color: wheat;
      }
    </style>
  </head>
  <body>
    
    <div id="calculation1">
      <div class="wrapper">
        <input class="field summand1" type="number" value="2">
      </div>
      <div class="wrapper">
        <input class="field summand2" type="number" value="3">
      </div>
      <div class="wrapper">
        <span class="field result"></span>
      </div>
    </div>
    
    <div id="calculation2">
      <div class="wrapper">
        <input class="field summand1" type="number" value="4">
      </div>
      <div class="wrapper">
        <input class="field summand2" type="number" value="5">
      </div>
      <div class="wrapper">
        <span class="field result"></span>
      </div>
    </div>
    
  </body>
  
  <script>
    function initCalculationFields(containerNode){
      var summand1Node = containerNode.querySelector(".summand1");
      var summand2Node = containerNode.querySelector(".summand2");
      var resultNode = containerNode.querySelector(".result");
      function calculate(){
        resultNode.textContent = parseFloat(summand1Node.value) +  parseFloat(summand2Node.value);
      }
      if (summand1Node && summand2Node && resultNode){
        summand1Node.addEventListener("change", calculate);
        summand2Node.addEventListener("change", calculate);
        calculate();
      }
      else {
        console.error("Some node not found:", summand1Node, summand2Node, resultNode);
      }
    }
    initCalculationFields(document.getElementById("calculation1"));
    initCalculationFields(document.getElementById("calculation2"));
  </script>
</html>

Anfänger - Funktionen

Kaulano

New member

kkapsner

Super Moderator