私は、コードを実行すると2つの配列、レイアウトが正しくない

Question

function start() { 
    document.getElementById("task").innerHTML="Task 8"; 
    var arrNames = []; 
    var arrToys = []; 
    var vName = ""; 
    var vToys = ""; 
    vName = prompt("Enter dog name (leave blank to stop)"); 
    vToys = prompt("Enter dogs toys (leave blank to stop)"); 
    while (vName.length > 0) { 
     arrNames.push(vName); 
     arrToys.push(vToys); 
     vName = prompt("Enter dog name (leave blank to stop)"); 
     vToys = prompt("Enter dogs toys (leave blank to stop)"); 
    } 
    var vOutput = "Dog names and No. of toys: <br/>" + arrNames.map((name, i) => `Dog ${i + 1} Name: ${name}`).join("<br/>") + arrToys.map((name) => ` No. of Toys: ${name}`).join("<br/>"); 
    document.getElementById("output").innerHTML=vOutput; 
} 

を使用して、私は犬の名前を取得しますが、その後のおもちゃの数は、私は次の犬の名前におもちゃの数を得るのですか、犬の名前の下にあります？ ありがとう

Answer 1

これは、2つの列とテーブルヘッダー行を持つテーブルに出力を置きます。

var vOutput = "<table><tr><th colspan=\"2\">Dog names and No. of toys:</th></tr><tr><td>" + arrNames.map((name, i) => `Dog ${i + 1} Name: ${name}`).join("<br/>") + "</td><td>" + arrToys.map((name) => ` No. of Toys: ${name}`).join("<br/>") + "</td></tr></table>"; 

これはこれを行う最も簡単な方法ですが、両側がそれぞれ1犬につき1行ずつ使用する場合にのみ機能します。