creatDocumentFragmentの入れ子になったforループがなぜ外側のforループを1回だけ実行するのですか？

Question

特定の量の列を作成し、各列に四角形を追加する目的でこのループを実行しようとしています。目標は1つのループでこれをすべて実行することでしたが、ループは1回、正常に実行されて終了しました。

function gridBuilder(columns,rows) { 
    var toAdd = document.createDocumentFragment(); 
    for (i = 1; i <= columns; i++) { 
    var column = document.createElement('div'); 
    column.id = 'card-column-'+i; 
    for (i = 1; i <= rows; i++) { 
     var row = document.createElement('div'); 
     row.id = 'card-'+i; 
     row.className = 'card'; 
     column.appendChild(row); 
    } 
    column.className = 'card-column'; 
    toAdd.appendChild(column); 
    } 

    document.getElementById('card-container').appendChild(toAdd); 
} 

HTML/CSSが不足していると理解しています。 gridBuilder(5,4);を実行すると、以下のように、4つの正方形で1つの列しか作成されないのはなぜですか？

<div id="card-container"> 

      <div id="card-column-1" class="card-column"> 
       <div id="card-1" class="card"></div> 
       <div id="card-2" class="card"></div> 
       <div id="card-3" class="card"></div> 
       <div id="card-4" class="card"></div> 
    </div> 
</div> 

注：クロームコンソールエラーを与えません。私はhereからほとんどを得ました。何らかの理由でこれのようなネストされたforループを実行することはできませんか？

Answer 1

フラグメントを使用せずに、それを#card-containerに追加するだけで済みます。

また、をforループに追加して、global variablesを回避する必要があります。

あなたが言ったように、両方のループで同じ変数を使用することはできません。あなた自身を見つける素晴らしい仕事！

function gridBuilder(columns, rows) { 
    container = document.getElementById('card-container'); 
    for (var i = 1; i <= columns; i++) { 
    var column = document.createElement('div'); 
    column.id = 'card-column-' + i; 
    for (var j = 1; j <= rows; j++) { 
     var row = document.createElement('div'); 
     row.id = 'card-' + j; 
     row.className = 'card'; 
     column.appendChild(row); 
    } 
    column.className = 'card-column'; 
    container.appendChild(column); 
    } 
} 

Answer 2

ネストされたforループを実行するときは、両方のループパラメータで同じ変数を使用することはできません。この場合、私はiを2回使用しました。私はjを使用するために2番目のループを変更し、今は動作します...他の人のためにこれをここに残します。

function gridBuilder(columns,rows) { 
    var toAdd = document.createDocumentFragment(); 
    for (i = 1; i <= columns; i++) { 
    var column = document.createElement('div'); 
    column.id = 'card-column-'+i; 
    for (j = 1; j <= rows; j++) { 
     var row = document.createElement('div'); 
     row.id = 'card-'+j; 
     row.className = 'card'; 
     column.appendChild(row); 
    } 
    column.className = 'card-column'; 
    toAdd.appendChild(column); 
    }