hinzufügen mehrerer Werte an ein array in javascript

Ich habe ein Problem mit der Ausgabe eines array, denke ich.

Was ich würde, wie die Ausgabe Aussehen wird:

1. FirstName LastName DOB

aber was ich am Ende mit ist:

1. FirstName
2. LastName
3. DOB

Hier ist was ich habe, so weit, aber ich bin nicht zu sehen, was ich falsch mache.

//global variable:
var tasks = []; 

//Function called when the form is submitted.
//Function adds a task to the global array.
function addTask() {
    'use strict';

    //Get the task:
    var firstName = document.getElementById('firstName');
    var lastName = document.getElementById('lastName');
    var dob = document.getElementById('dob');

    //numerical value of dob
    var dateofBirth = new Date(dob.value);

    //Reference to where the output goes:
    var output = document.getElementById('output');

    //For the output:
    var message = '';

    if (firstName.value && lastName.value && dob.value) {

        //Add the item to the array:
        tasks.push(firstName.value, lastName.value, dateofBirth.toString());


        //Update the page:
        message = '<h2>Persons Entered</h2><ol>';
        for (var i = 0, count = tasks.length; i < count; i++) {
            message += '<li>' + tasks[i] + '</li>';
        }
        message += '</ol>';
        output.innerHTML = message;

    } //End of IF.

    //Return false to prevent submission:
    return false;

} //End of addTask() function.

//Initial setup:
function init() {
    'use strict';
    document.getElementById('theForm').onsubmit = addTask;
} //End of init() function.
window.onload = init;

Dank, ich hoffe das hilft Euch mir zu helfen.

Weil <li> vertikal aufgestellt sind standardmäßig. Sie eine änderung an der css über die <ol> <li> Attribut display: inline; list-style-type: none; wenn Sie wollen, dass es waagerecht ohne Punkt. Oder, setzen Sie in der gleichen <li>
Sie sollten Ihr Konzept zu ändern, um mit zu beginnen. Das ist ein typischer Missbrauch der .innerHTML. Jedes mal, wenn Sie eine neue Aufgabe hinzufügen, Sie zerstören die alten und neu zu erstellen Sie.

InformationsquelleAutor punktilend | 2012-11-04

4
```
tasks.push({firstName: firstName.value, lastName: lastName.value, DOB: dateofBirth.toString()})
```
Dann
```
tasks[0].firstName will output firstName.value
tasks[0].lastName will output lastName.value 
```
etc..

Bearbeiten

Anhand dieser können Sie dann erstellen Sie Ihre messasge wie diese :
```
for (var i = 0, count = tasks.length; i < count; i++) {
    message += '<li><span>' + tasks[i].firstName + '</span><span> ' 
    + tasks[i].lastName + '</span><span>' + tasks[i].DOB + '</span></li>';
}
```
Natürlich die span-tags sind optionnal aber dies wird Ihnen ermöglichen, einen Stil, um jedem Teil der Informationen, die in Ihren css (width, padding, usw..), und Sie werden immer in der Lage, leicht wählen Sie eine Eigenschaft einer Aufgabe, die durch den index
- Dieser keine Antwort auf seine Frage. Er scheint sich bewusst zu sein, wie man arrays nutzen
- Korrigiert habe ich anwser nach der Zeile Editieren 🙂
InformationsquelleAutor Yann

Dein problem ist, dass Sie hinzufügen li Elemente zu jedem element in deinem array, sondern nur hinzufügen teh li einmal

    //Update the page:
    message = '<h2>Persons Entered</h2><ol><li>' + tasks.join(' ') + '</li></ol>';
    output.innerHTML = message;

InformationsquelleAutor Pastor Bones

1

Warum setzen Sie jedes element in seinem eigenen <li>?

Wenn Sie nicht setzen es in verschiedenen <li> aber in eine Allgemeine, alles wird gut
```
message = '<h2>Persons Entered</h2><ol><li>';

        for (var i = 0, count = tasks.length; i < count; i++) {
            message += tasks[i];
            message += " ";
        }
        message += '</li></ol>';
        output.innerHTML = message;
```
- Dies wird im Ergebnis firstNamelastNameDOB alles Durcheinander
- Ja du hast Recht, aber ich denke, das ist nicht wirklich der größte Punkt hier. Ich von Ihnen positiv bewertet werden Ihre Antwort, die ist viel sauberer als meine.
InformationsquelleAutor Jeremy D

Benutzen, Umfassen. Sie können Arrays verwendet werden.join

output.innerHTML= '<h2>Persons Entered</h2><div><span>' + tasks.join("</span> <span>") +"</span>";

InformationsquelleAutor Anoop

0

Sie möchten, fügen Sie Sie als array an das array, nicht als Werte an das array

Was Sie haben, ist dies:
```
tasks.push(firstName.value, lastName.value, dateofBirth.toString());
```
was ich denke, Sie wollen, ist dies:
```
tasks.push([firstName.value, lastName.value, dateofBirth.toString()]);
```
Die Antwort oben ist die gleiche, aber mit ein Objekt, kein array.

InformationsquelleAutor Dan Steingart
0

Was Sie tun ist, drücken Sie mehrere Werte in das array. Was Sie wollen, zu tun ist, um die verschiedenen Werte zu einem einzigen Wert, und drücken Sie dann diesen Wert in das array. Um den genauen Ausgang, wie Sie angefordert wurden, können Sie diese mehrere Werte in einem durch die Verkettung in einen string:

Ändern:
```
tasks.push(firstName.value, lastName.value, dateofBirth.toString());
```
In diesem:
```
tasks.push(firstName.value + ' ' + lastName.value + ' ' + dateofBirth.toString());
```
Das bedeutet doch, verlieren Sie den Zugriff auf die einzelnen Werte. Wenn Sie möchten, den Zugang zu diesen, könnten Sie stattdessen versammeln Sie sich in ein Objekt:
```
tasks.push({"firstName" : firstName.value,
            "lastName" : lastName.value,
            "dateOfBirth" : dateofBirth.toString());
```
InformationsquelleAutor Jasper
0

Sein ein wenig verwirrend, was Sie Fragen. Wenn Sie wollen einfach nur dies:
```
1. FirstName LastName DOB
```
über diese:
```
1. FirstName
2. LastName
3. DOB
```
Dann ist dein Problem nicht mit dem array, aber mit, wie Sie bei der Definition der code der Schleife. Versuchen Sie dies:
```
//Update the page:
message = '<h2>Persons Entered</h2><ol><li>';
for (var i = 0, count = tasks.length; i < count; i++) {
    message += tasks[i] + ' ';
}
message += '</li></ol>';
```
Diese Weise sind Sie setzen die array-Elemente in einer einzigen Liste-element, sondern über drei von Ihnen.

BEARBEITEN - für Multi-dimensionalen Arrays-traversal

Dies ist unter der Annahme, dass das array ist so definiert (pro Dan Steingart ist Antwort):
```
tasks.push([firstName.value, lastName.value, dateofBirth.toString()]);
```
Wir dann die folgende:
```
//Update the page:
message = '<h2>Persons Entered</h2><ol>';

for (var i = 0, count = tasks.length; i < count; i++) {
    message += '<li> + tasks[i].toString().replace(',',' ') + '</li>';
}

message += '</ol>';
```
Hier sind Sie durchqueren jedes element von tasks wenn sich jedes element von tasks ist auch selbst ein array. Die toString() auf ein inneres array zeigt die Werte in einer Komma-separierten Mode, dann die replace() Funktion ersetzt einfach das Komma mit Leerzeichen.
- Danke, das half
- Ich versuche, die Ausgabe mehr als eine. 1. Vorname Nachname Geburtsdatum direkt unter ihm 2. Vorname Nachname Geburtsdatum etc....
- Mit Ihrem code, Sie sind nur der Definition der array für eine Reihe von Werten. Sie können Folgen einige der anderen Vorschläge, die hier für das hinzufügen weiterer Sätze von Werten. @DanSteingarts Antwort gibt ein akzeptabler Weg, dies zu tun. Ich passe meine Antwort um ein multi-dimenional Arrays-traversal
InformationsquelleAutor Hari Seldon

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.