Ergebnisse aus einer Schleife addieren und zusammenausgeben

[Rolf B]

Hallo Therry,

eine kleine Anmerkung: Deine input Elemente brauchen Labels, sonst ist die Seite nicht benutzbar. Für's Basteln ist es egal, wenn Du was publizierst, nicht.

Die Frage, wie man die Rechnung ordentlich anstößt, hatten wir neulich noch in einem anderen Thread. Man kann entweder an jedem input-Feld ein oninput Attribut notieren, oder man tut es am Form, und verwendet ein Feature des Browsers, das sich Event Bubbling nennt.

Die HTML Elemente, die Du verwendest, sind hierarchisch geordnet. Der Body enthält das Form, das Form die Inputs, und so weiter. Die Datenstruktur, die das abbildet, ist ein Baum - der Dokumentbaum. Das kannst Du mit einem Stammbaum vergleichen, der die Abkömmlinge von irgendeinem König zeigst. Der Body ist der König, das Form ein Kind und das input ein Enkel.

Wenn ein Ereignis wie input ausgelöst wird, dann passiert das zuerst auf dem Element, für das es gilt. Danach wird es in der Elternkette bis ganz oben durchgereicht und dort ebenfalls ausgelöst. Ein Tastendruck in einem input-Feld löst also erstmal ein input-Event auf dem Eingabefeld aus, dann eins auf dem Form, dann eins auf dem Body (oder an noch mehr Stellen, wenn dein HTML umfangreicher ist). Wenn Du es genau wissen willst: hier steht mehr, als Du jemals wissen möchtest 😉.

Ein zentraler Rechner könnte also auf dem Form registriert sein und alle inputs einsammeln. Um zu wissen, was er damit tun muss, braucht er natürlich Informationen. Dafür gibt es das event-Objekt, da steckt eine Eigenschaft target drin, die das Element enthält, für das das Ereignis ausgelöst wurde. Das event-Objekt bekommst Du auf zwei mögliche Arten:

Wenn Du mit oninput arbeitest, musst Du es als Parameter übergeben. Das ist die "klassische" Version, und der Name "event" ist an dieser Stelle festgelegt.

<form id="rechner" oninput="berechne(event)">

Alternativ kannst Du die Registrierung des input Handlers im JavaScript durchführen. Dafür lässt Du oninput im HTML weg und schreibst in deinem Script:

document.getElementById("rechner").addEventListener("input", berechne);

Wichtig ist dabei nur, dass dieses Script erst ausgeführt wird, wenn das form schon angelegt ist (also am Ende des body steht), sonst findet getElementById das Form nicht.

Egal, wie Du es machst, deine Berechnungsfunktion wird dann für alle Eingaben in allen input-Feldern des Form aufgerufen. Sie muss also als erstes schauen, was das event.target war, und dementsprechend weitermachen.

function berechne(event) {
   let wert = event.target.valueAsNumber || 0;
   let id = event.target.id;
   if (id.startsWith("e_")) {
      schreibeWert("a", id.substr(2), wert * 12;
   }
   else if (id.startsWith("a_")) {
      schreibeWert("e", id.substr(2), Math.round(wert / 12);
   }
   berechneSumme();
}

Rechner1 und Rechner2 entfallen dann.

id.startsWith(...) liefert true, wenn die ID mit dem String beginnt, der in den Klammern steht. id.substr(2) liefert den Teil der ID ab Index 2, also der 3. Stelle.

Rolf