Mehrere Input Felder in einem Array speichern mit Javascript

[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