Why does my nested for loop for creatDocumentFragment run the outside for loop only once?

Question

I am attempting to run this loop for the purpose of creating a specific amount of columns and add squares to each column. The goal was to do this all in one loop but my loop will run once, successfully, then quit.

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

Understanding you are missing the HTML/CSS (it's a lot). Why is it that when I run gridBuilder(5,4); it creates only 1 column with 4 Squares, like below.

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

Note: Chrome console gives no errors. I got most of this from here. Is it not possible to run a nested for loop like this for some reason?

I don't know what plunker is, but I just figured it out... Will post an answer so other noobs can see. — yohohosilver, Oct 20 '17 at 05:30

score 1 · Answer 1 · answered Oct 20 '17 at 05:30

When running a nested for loop you cannot use the same variable in both for loop parameters. In this case, I used i twice. I changed the second loop to use j and now it works... will just leave this here for others.

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

Chris Happy · Accepted Answer · 2017-10-20T06:37:27.267

1

You can avoid using a fragment and just append it to #card-container.

You should also add a var in the for loops to avoid global variables.

And yes, as you said, you can't use the same variable in both for loops. Great job finding it yourself!

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

edited Oct 20 '17 at 06:37

answered Oct 20 '17 at 05:37

Chris Happy

7,088
2
22
49

Why would one want to avoid the use of fragment? I was under the (very possibly incorrect) understanding that it was better for performance to use a fragment for this type of operation. Thank you! – yohohosilver Oct 20 '17 at 06:15
@MattWeber I think that's only "when it is used to insert a *set of elements* in **multiple places**". [Source](https://stackoverflow.com/questions/14203196/does-using-a-document-fragment-really-improve-performance). Check out [this performance test](https://jsperf.com/fragment-vs-just-append). – Chris Happy Oct 20 '17 at 06:33
@MattWeber I think you're right! Depending on how's your computer is feeling, it's sometimes faster than other times. – Chris Happy Oct 20 '17 at 06:45

Why does my nested for loop for creatDocumentFragment run the outside for loop only once?

2 Answers2