Mehrere Input Felder in einem Array speichern mit Javascript

[Doktory]

Hallo, Ich bin gerade dabei mir HTML CSS und JAVA beizubringen, komme da auch nach und nach gut voran. Nun habe ich aber eine Stelle wo ich nicht zu finden kann und hoffe, dass mir hier Jemand weiter helfen kann.

evtl kann mir Jemand auch noch weitere bzw eine andere Herangehensweise dazu erklären.

Ich möchte 5 Input Felder die vom Typ number sind in denen ein User Zahlen eintragen kann. dann drückt der User einen Knopf und bekommt als Ergebnis den Durchschnitt der Zahlen.

Also gibt er 2 Zahlen ein, werden diese addiert und durch 2 geteilt. gibt er 3 Zahlen ein, werden diese addiert und durch 3 geteilt. usw.

Jetzt habe Ich 5 Inputfelder erstellt für die 5 Zahlen.

          <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>

dann hab ich mir gedacht, um nicht für jedes Feld einzeln eine Variable zu deklarieren möchte ich diese 5 Variablen beim klick auf einen Button per .onclick = function in ein Array schreiben

das sieht bei mir momentan so aus:

        <button id="getbtn">machmal</button>

    <script type="text/javascript">

         
         document.getElementById("getbtn").onclick = function() {
                    
                
         let inputnbrs = [document.getElementById("nbr1", "nbr2", 
         
         "nbr3", "nbr4", "nbr5")].values;
                     
          }
    
    </script>

wenn ich aber jetzt mit dem Befehl: alert(inputnbrs[0]);den ersten Wert im Array ausgeben will gibt er mir "undefined" im Alert aus.

Kann man die Variablen überhaupt so in ein Array schreiben und wenn ja wo liegt mein Fehler. Die zweite Frage sind diese Werte (wenn das denn geht) als String hinterlegt oder als number? weil ich ja auch number inputs verwende. Und ich muss ja im späteren Schritt operationen mit den Zahlen durchführen.

Die dritte Frage wäre dann noch: Wie kann ich es anstellend dass quasi erkannt wird ob 1, 2, 3 oder 4 bzw 5 Zahlen Eingetragen wurden, da ich ja davon abhängig machen muss durch wie viel ich teile.

Ich bin auf Lösungsvorschläge gespannt und Danke im Voraus.

[Matthias Scharwies]

Hallo,

Herzlich willkommen bei SELFHTML!

Ich bin gerade dabei mir HTML CSS und JAVA beizubringen, komme da auch nach und nach gut voran.

Achtung! JAVA und JavaScript sind nicht dasselbe! -> Der Unterschied zwischen Java und JavaScript ...

evtl kann mir Jemand auch noch weitere bzw eine andere Herangehensweise dazu erklären.

Du vermischt neue Sprachelemente wie let mit alten, nicht mehr gebräuchlichen Sachen wie

• <script type="text/javascript"> Dort kannst du den type weglassen, es gibt keine anderen Scriptsprachen im Browser mehr
• onclick Dort verwendet man heute EventListener.

Lies dir mal folgendes Tutorial durch:

• Das DOM und Einbindung in HTML

Ich möchte 5 Input Felder die vom Typ number sind in denen ein User Zahlen eintragen kann. dann drückt der User einen Knopf und bekommt als Ergebnis den Durchschnitt der Zahlen.

Also gibt er 2 Zahlen ein, werden diese addiert und durch 2 geteilt. gibt er 3 Zahlen ein, werden diese addiert und durch 3 geteilt. usw.

Jetzt habe Ich 5 Inputfelder erstellt für die 5 Zahlen.

          <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>

dann hab ich mir gedacht, um nicht für jedes Feld einzeln eine Variable zu deklarieren möchte ich diese 5 Variablen beim klick auf einen Button per .onclick = function in ein Array schreiben

das sieht bei mir momentan so aus:

        <button id="getbtn">machmal</button>

    <script type="text/javascript">

         
         document.getElementById("getbtn").onclick = function() {
                    
                
         let inputnbrs = [document.getElementById("nbr1", "nbr2", 
         
         "nbr3", "nbr4", "nbr5")].values;
                     
          }
    
    </script>

wenn ich aber jetzt mit dem Befehl: alert(inputnbrs[0]);den ersten Wert im Array ausgeben will gibt er mir "undefined" im Alert aus.

Kann man die Variablen überhaupt so in ein Array schreiben und wenn ja wo liegt mein Fehler.

Schau mal hier nach Document.getElementById()

Du kannst nur eine id eingeben und dort dann den value auslesen. Deshalb würde ich die inputFelder in einer Schleife nacheinander auslesen und dann in den array schreiben.

Die zweite Frage sind diese Werte (wenn das denn geht) als String hinterlegt oder als number? weil ich ja auch number inputs verwende.

Du könntest das mit typeof prüfen, aber das ist nocht notwendig. Es sind Zahlen, die man addieren oder anders auswerten kann.

Und ich muss ja im späteren Schritt operationen mit den Zahlen durchführen.

Die dritte Frage wäre dann noch: Wie kann ich es anstellend dass quasi erkannt wird ob 1, 2, 3 oder 4 bzw 5 Zahlen Eingetragen wurden, da ich ja davon abhängig machen muss durch wie viel ich teile.

Überprüfe in einer Wenn-Dann-Bedingung, ob das input-Feld denn überhaupt einen value besitzt.

Ich bin auf Lösungsvorschläge gespannt und Danke im Voraus.

Herzliche Grüße

Matthias Scharwies

[Gunnar Bittersmann]

@@Matthias Scharwies

Schau mal hier nach Document.getElementById()

Nei-en!

Eingabefelder sollten einen namen haben. Dann sind bereits über FormElement.elements['<name>'] oder auch FormElement.elements.<name> verfügbar, ohne dass man sie aus dem DOM raussuchen müsste.

Das hatten wir doch gerade erst.

🖖 Stay hard! Stay hungry! Stay alive! Stay home!

[Matthias Scharwies]

Servus!

@@Matthias Scharwies

document.getElementById("nbr1", "nbr2", "nbr3", "nbr4", "nbr5")

Schau mal hier nach Document.getElementById()

Nei-en!

Eingabefelder sollten einen namen haben. Dann sind bereits über FormElement.elements['<name>'] oder auch FormElement.elements.<name> verfügbar, ohne dass man sie aus dem DOM raussuchen müsste.

Das hatten wir doch gerade erst.

Mir ging's eher darum, dass man nicht mehrere IDs als Parameter übergeben kann, aber danke, dass auch Du etwas dazu beigetragen hast!

Herzliche Grüße

Matthias Scharwies

[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

[Gunnar Bittersmann]

@@Felix Riesterer

[Demo]

Sollte nicht ein Durschnitt-Rechner nicht das arithmetische Mittel berechnen, sondern das harmonische? 🤔

Und gibt es auch einen Mollschnitt-Rechner?

🖖 Stay hard! Stay hungry! Stay alive! Stay home!