在JavaScript中将多个值添加到单个数组项

Question

我有一个数组输出的问题，我想是这个问题。

我希望输出的结果如下：

1. FirstName LastName DOB

但是我最终得到的是：

1. FirstName
2. LastName
3. DOB

这是我目前的代码，但我没有看到我的错误在哪里。

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

谢谢，我希望这能帮助你帮助我。

- punktilend

---

因为默认情况下，<li>元素是垂直排列的。如果你希望它水平排列且没有项目符号，你需要在<ol> <li>属性上更改你的CSS样式，添加display: inline; list-style-type: none;。或者，将它们放在同一个<li>元素中。 - Jeremy D

你应该改变你的方法。这是一个典型的误用.innerHTML。每次添加新任务时，你都会销毁旧任务并重新创建它们。 - I Hate Lazy

Answer 1

tasks.push({firstName: firstName.value, lastName: lastName.value, DOB: dateofBirth.toString()})

然后。

tasks[0].firstName will output firstName.value
tasks[0].lastName will output lastName.value 

使用这个，您可以像这样构建您的消息：

编辑

然后，您可以像这样构建您的消息：

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>';
}

当然，span标签是可选的，但这样可以让你在css中对信息的每个部分应用样式（宽度、填充等），并且你始终可以通过索引轻松选择任务的属性。

- Yann

---

这并没有回答他的问题。他似乎知道如何使用数组。 - Pastor Bones

Answer 2

你的问题在于你正在将 li 元素添加到数组中的每个元素，而不是只添加一次 li。

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

- Pastor Bones

Answer 3

为什么要将每个元素放在自己的<li>中？

如果不将它们放在不同的<li>中，而是放在一个公共的<li>中，一切都会很好。

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;

- Jeremy D

---

这将导致firstNamelastNameDOB全部混在一起。 - Pastor Bones

是的，你说得对，但我认为这并不是最重要的点。我给你的答案点了赞，它比我的干净多了。 - Jeremy D

Answer 4

使用Span。你可以使用Array.join。

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

- Anoop

Answer 5

你想将它们作为数组添加到数组中，而不是将它们作为值添加到数组中。

你现在拥有的是这样的：

tasks.push(firstName.value, lastName.value, dateofBirth.toString());

我认为你想要的是这个：

tasks.push([firstName.value, lastName.value, dateofBirth.toString()]);

以上的答案是一样的，但是使用的是对象而不是数组。

- Dan Steingart

Answer 6

你正在将多个值推入数组中。你想要做的是将不同的值转换为单个值，然后将该值推入数组中。为了获得你所请求的精确输出，你可以通过将这些多个值连接成一个字符串来将它们转换为一个值：

更改为：

tasks.push(firstName.value, lastName.value, dateofBirth.toString());

转换为：

tasks.push(firstName.value + ' ' + lastName.value + ' ' + dateofBirth.toString());

然而，这意味着您将失去对单个值的访问。如果您想要访问它们，您可以将它们组装成一个对象：

tasks.push({"firstName" : firstName.value,
            "lastName" : lastName.value,
            "dateOfBirth" : dateofBirth.toString());

- Jasper

Answer 7

你的问题有点令人困惑。如果你只是想要这个：

1. FirstName LastName DOB

关于这个：

1. FirstName
2. LastName
3. DOB

那么你的问题不在于数组，而在于你如何定义循环代码。尝试使用以下代码：

// 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>';

这样做会将数组元素放在单个列表元素中，而不是跨越三个元素。

---

编辑 - 多维数组遍历

假设数组是按照Dan Steingart的答案定义的：

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].toString().replace(',',' ') + '</li>';
}

message += '</ol>';

在这里，您正在遍历tasks的每个元素，而每个tasks元素本身也是一个数组。对内部数组使用toString()将以逗号分隔的方式显示值，然后replace()函数只需用空格替换逗号即可。

- Hari Seldon

---

我正在尝试输出多个。1. 名字 姓氏 出生日期 直接在其下方 2. 名字 姓氏 出生日期等.... - punktilend

通过你的代码，你只定义了一个数组来存储一组值。你可以按照其他建议添加其他值集合的方法进行操作。@DanSteingarts的回答提供了一种可接受的解决方法。我会编辑我的回复，包括多维数组遍历。 - Hari Seldon