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;

谢谢，我希望这有助于你帮助我。

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（宽度，填充等等）中对信息的每个部分应用一种风格，你总是可以轻松地选择一个属性。索引的任务

Answer 2

您的问题是，您要将li元素添加到数组中的每个元素，而只是添加一次

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

Answer 3

为什么要将每个元素放在自己的<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;中，一切都会好的

{{1}}

Answer 4

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

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

Answer 5

您希望将它们作为数组添加到数组中，而不是作为数组的值

你拥有的是：

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

我认为你想要的是：

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

答案above是相同的，但是有一个对象，而不是一个数组。

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());

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's个答案）：

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()函数只是用空格替换逗号。

在javascript中向数组添加多个值

7 个答案: