Mehrere Input Felder in einem Array speichern mit Javascript
bearbeitet von 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 ...](http://selfhtml.apsel-mv.de/java-javascript/?buchstabe=M)
> 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 Scriiptsprachen im Browser mehr
* `onclick` Dort verwendet man heute EventListener.
Lies dir mal folgendes Tutorial durch:
* [Das DOM und Einbindung in HTML](https://wiki.selfhtml.org/wiki/JavaScript/Tutorials/DOM)
>
> 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()](https://wiki.selfhtml.org/wiki/JavaScript/DOM/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](https://wiki.selfhtml.org/wiki/JavaScript/Operatoren/typeof) prüfen, aber das ist nocht notwendig. Es sind Zalhen, 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
--
25 Jahre SELFHTML → **neuer Termin!** → **[SELF-Treffen 09.-11. Oktober 2020](https://forum.selfhtml.org/events/4)** in **Mannheim**
Mehrere Input Felder in einem Array speichern mit Javascript
bearbeitet von 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 ...](http://selfhtml.apsel-mv.de/java-javascript/?buchstabe=M)
> 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 Scriiptsprachen im Browser mehr
* `onclick` Dort verwendet man heute EventListener.
Lies dir mal folgendes Tutorial durch:
* [Das DOM und Einbindung in HTML](https://wiki.selfhtml.org/wiki/JavaScript/Tutorials/DOM)
>
> 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.
Herzliche Grüße
Matthias Scharwies
--
25 Jahre SELFHTML → **neuer Termin!** → **[SELF-Treffen 09.-11. Oktober 2020](https://forum.selfhtml.org/events/4)** in **Mannheim**