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

ありがとう、これがあなたが私を助けるのに役立つことを願っています。

score 6 · Accepted Answer

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 内の情報の各部分 (幅、パディングなど) にスタイルを適用でき、タスクのプロパティをいつでも簡単に選択できます。索引

score 1 · Accepted Answer

あなたの問題はli、配列内のすべての要素に要素を追加していることです。代わりに、li を 1 回だけ追加します。

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

score 1 · Accepted Answer

なぜ各要素を独自に配置するの<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;

score 0 · Accepted Answer

スパンを使用します。Array.join を使用できます

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

score 0 · Accepted Answer

配列への値としてではなく、配列としてそれらを配列に追加したい

あなたが持っているのはこれです：

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

あなたが欲しいと思うのはこれです：

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

上記の答えは同じですが、配列ではなくオブジェクトを使用しています。

score 0 · Accepted Answer

あなたがしていることは、複数の値を配列にプッシュすることです。やりたいことは、さまざまな値を単一の値に変換し、その値を配列にプッシュすることです。要求していた正確な出力を取得するには、これらの複数の値を文字列に連結して 1 つに変換できます。

これを変える：

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

score 0 · Accepted Answer

あなたが求めていることは少し混乱しています。単にこれが必要な場合：

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

そうすれば、配列要素を 3 つにまたがるのではなく、1 つのリスト要素に入れることができます。

EDIT - 多次元配列トラバーサル用

これは、配列がこのように定義されていることを前提としています( 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()

javascript - javascriptの単一の配列アイテムに複数の値を追加する

7 に答える 7

Related

Reference