Ergebnis 1 bis 2 von 2
Like Tree1Likes
  • 1 Post By kkapsner

Thema: Anfänger - Funktionen

  1. #1
    Kaulano ist offline Grünschnabel
    registriert
    02-09-2020
    Beiträge
    1

    Question Anfänger - Funktionen

    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-Code:
    <!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
    Geändert von mikdoe (02-09-2020 um 09:07 Uhr) Grund: Code Tags

  2. #2
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.751

    AW: Anfänger - Funktionen

    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-Code:
    <!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>
    mikdoe likes this.

Ähnliche Themen

  1. Funktionen innerhalb von Funktionen
    Von DonR im Forum JavaScript
    Antworten: 25
    Letzter Beitrag: 27-05-2013, 12:04
  2. Antworten: 8
    Letzter Beitrag: 06-06-2007, 10:09
  3. Anfänger
    Von commander im Forum JavaScript
    Antworten: 0
    Letzter Beitrag: 10-02-2005, 22:11
  4. HP Anfänger
    Von cybermaus im Forum Allgemeines
    Antworten: 5
    Letzter Beitrag: 19-01-2005, 23:29
  5. anfänger ...
    Von sporttasche im Forum Flash
    Antworten: 2
    Letzter Beitrag: 24-03-2002, 20:57

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •