Mehrere Input Felder in einem Array speichern mit Javascript

[Felix Riesterer]

Lieber Doktory,

<form id="usrinputform">
  <input type="number" id="nbr1"> 
  <input type="number" id="nbr2">
  <input type="number" id="nbr3">
  <input type="number" id="nbr4">
  <input type="number" id="nbr5">
</form>

es würde wohl genügen, wenn man die ID des Formulars nimmt, um alle Eingabefelder für Zahlen zu ermitteln. Und wenn wir schon dabei sind, können wir dafür sorgen, dass nach Eingabe einer Zahl sofort ein weiteres Eingabefeld entsteht, welches eine weitere Zahl aufnehmen kann:

<form id="usrinputform">
  <ul>
    <li>
      <label>
        Zahl:
        <input type="number">
      </label>
    </li>
  </ul>
</form>
<output></output>

Mit JavaScript lauscht man dann, ob in das Eingabefeld etwas eingegeben wurde, um dann bei Bedarf ein neues hinzuzufügen. Außerdem wird sofort der Durchschnitt berechnet, ohne dass man dazu etwas zusätzlich tun muss. Das Betätigen der Eingabetaste sendet als Standardverhalten im Browser das Formular ab, was man damit verhindert, dass man einen EventListener auf das Formular setzt, der den Versand blockiert und stattdessen die Berechnung der Werte ausführt.

[Demo]

Liebe Grüße

Felix Riesterer