Felix Riesterer: Schleife in einer Javascript funktion

Beitrag lesen

Lieber Franz,

ich hätte da noch eine grundlegende Idee.

Was willst Du eigentlich erreichen? Du willst die Summe von Fließkommazahlen aus mehreren Eingabefeldern berechnen. In Deiner Funktion ist die Anzahl als auch die Namen der Elemente fest kodiert. Das funktioniert, ist aber sehr unflexibel.

Wie wäre es, wenn Deine Funktion nur einen kleinen Informationshappen vorgeworfen bekäme, mit dem sie dann den Rest von selbst erledigte? Etwa so:

function summe_eingaben (elternelement) {
  const felder = elternelement.querySelectorAll('[type="number"]');
  var summe = 0;

  felder.forEach((f) => { summe += getInputAsFloat(f); });

  return summe,
}

Mein Vorschlag basiert auf zwei Annahmen: Alle zu berechnenden Werte stehen in Elementen mit dem Attribut type und dessen Wert number (z.B. <input type="number">). Außerdem stehen alle diese Elemente irgendwo als Nachfahrenelemente eines bestimmten Elternelements, in dem ansonsten keine weiteren Elemente dieser Art stehen, die nicht mitberechnet werden sollen.

Mit der Methode querySelectorAll kann man eine Liste von Elementen erhalten, auf die ein Selektor passt (wie bei CSS auch). Diese Liste ist ein Objekt, welches die Methode forEach kennt (nur alte Browser haben hier eventuell ein Problem), mit der man jedes Element der Liste abarbeiten kann. Dazu muss man der forEach-Methode eine Funktion als Argument übergeben, in der geregelt wird, was mit dem einzelnen Element der Liste passieren soll. Meine Schreibweise oben ist mit einer Pfeilfunktion, aber das hätte man auch "altmodisch" so schreiben können:

felder.forEach(
  function (f) {
    summe += getInputAsFloat(f);
  }
);

Die Funktion, die man forEach zum Fraße vorwirft, bekommt zwei Parameter übertragen, von denen der erste eine Referenz auf das aktuelle Element der Liste ist (hier in der Variable f entgegen genommen), und der zweite die laufende Nummer innerhalb der Liste (wird hier ignoriert).

Damit hast Du eine flexiblere Lösung, die sich auch nicht um Namen, ID oder sonstwas kümmert, sondern brav nimmt, was da ist, um dann zusammen zu rechnen.

Liebe Grüße

Felix Riesterer

0 59

Schleife in einer Javascript funktion

Franz
  • javascript
  1. 1
    Tabellenkalk
    1. 0
      Franz
      1. 0
        Tabellenkalk
        1. 0
          Franz
          1. 0
            Rolf B
  2. 2
    Rolf B
    1. 0
      Franz
      1. 1
        JürgenB
        1. 0
          Rolf B
          1. 0
            JürgenB
          2. 0
            Tabellenkalk
      2. 1
        Rolf B
        1. 0
          Franz
          1. 0
            Rolf B
            1. 0
              Franz
              1. 0
                Rolf B
                1. 0
                  Franz
                  1. 0

                    Wert(e) aus function speichern für andere function vorbehalten und wiederverwenden

                    Franz
                    1. 0
                      Der Martin
                      1. 0
                        Rolf B
                    2. 1
                      Rolf B
                      1. 0
                        Franz
                        1. 0
                          Rolf B
                      2. 0

                        Summenzuweisung wird nicht ausgeführt

                        Franz
                        1. 0
                          Rolf B
                          1. 0
                            Franz
                            1. 0
                              Rolf B
                              1. 0

                                Summenzuweisung wird nicht ausgeführt, wenn INPUT Felder nicht übergen werden

                                Franz
                                1. 0
                                  Tabellenkalk
                                2. 0
                                  Der Martin
                                3. 0
                                  Rolf B
                                  1. 0
                                    Franz
                                    1. 0
                                      Rolf B
                                      1. 0
                                        Franz
                                        1. 0
                                          Rolf B
                                          1. 0
                                            Felix Riesterer
                                            1. 0
                                              Rolf B
                                              1. 0
                                                Felix Riesterer
                                                1. 0
                                                  Rolf B
                                          2. 0
                                            Franz
                                            1. 0
                                              Rolf B
                                              1. 0
                                                Franz
                                                1. 1
                                                  Rolf B
                                                  1. 0
                                                    Franz
                            2. 0
                              Rolf B
                              1. 0
                                Franz
                                1. 0
                                  Rolf B
                                  1. 0
                                    Franz
                                    1. 0
                                      Rolf B
                                      1. 0

                                        function setOptionalValue

                                        Franz
                                        1. 0
                                          Rolf B
                                          1. 0
                                            Franz
                                            1. 0
                                              Rolf B
                                    2. 0
                                      Matthias Scharwies
  3. 0
    Felix Riesterer
    1. 0
      Rolf B
  4. 0

    Bei fehlender Variable WIEDER Abbruch ?

    Franz
    1. 1
      Felix Riesterer