Nested for-loop only executing once

Question

I am using JavaScript and jQuery to create a simple 40x40 grid.

Here's my nested for loop to do this:

function display_grid() {
  browser_grid = ''
  $visible_grid = $('#grid');

  for (i = 0; i < 40; i++) {
    $visible_grid.append('<div>');
    for (i = 0; i < 40; i++) {
      $visible_grid.append("<div class='square'> </div>");
    }
    $visible_grid.append('</div>');
  }
}

I expect this to create 40 divs each with 40 divs inside each one of them. The browser shows only one single row with 40 divs.

<div>
    <div class="square></div>
    <div class="square></div>
    <div class="square></div>
    ...
</div>

This is what I want it to do, but forty times. I'm not very experienced with JS, so I'm confused as to why the first loop isn't executing 40 times.

Note: The DOM API, that .append() depends upon, does not allow for injecting partial markup, such as '<div>' and '</div>' at separate times. It will forcibly "fix" the <div> into <div></div> and likely ignore the </div>. If you want to construct markup in parts, use a string and .append() the combined result. — Jonathan Lonowski
– Jonathan Lonowski, Commented Oct 2, 2015 at 23:44
I noticed that now that I fixed this. Should I just inject everything into a string then append it? Or is there a better way? — Ecko
– Ecko, Commented Oct 2, 2015 at 23:46
You are using the same global variable in both loops. Global variables should be avoided. — some
– some, Commented Oct 3, 2015 at 0:03

manonthemat · Accepted Answer · 2015-10-02 23:42:45Z

4

You need a different variable name for the inner loop.

function display_grid() {
    browser_grid='';
    $visible_grid = $('#grid');

    for(var i=0; i<40; i++){
        $visible_grid.append('<div>');
        for(var j=0; j<40; j++){
            $visible_grid.append("<div class='square'> </div>");
        }
        $visible_grid.append('</div>');
    }

Edit: Added code. Note that you should use the var keyword for counting variables in your for-loops.

What happened in your code is that after the 40 inner divs are created, the counter i is at 40 and the condition for the outer loop isn't true any longer, thus exiting that code block.

edited Oct 2, 2015 at 23:42

answered Oct 2, 2015 at 23:37

manonthemat

6,2712 gold badges29 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ecko · Accepted Answer · 2015-10-02 23:56:13Z

0

Thanks for the help guys!

Changed the variable for my inner loop fixed the problem, but there was a problem with using .append()

Apparently it doesn't support partial markup, so instead I just appended all of my divs to a string instead.

for(var i=0;i<40;i++){
            browser_grid+='<div>';
            for(var x=0;x<40;x++){
                browser_grid+="<div class='square'> </div>";
            }
            browser_grid+='</div>';
        }

        $visible_grid.append(browser_grid)

After which, I appended the string to $visible_grid

This seemed to do what I wanted it to do. Just wanted to point it out for anyone else using the append method for this purpose.

answered Oct 2, 2015 at 23:56

Ecko

1913 silver badges15 bronze badges

1 Comment

pomeh Over a year ago

Thanks for the reply. For info, maybe it's better written like this:

browser_grid=''; onegrid='';  onegrid+='<div>'; for(var x=0;x<40;x++) { onegrid+='<div class="square"> </div>'; } onegrid+='</div>';  for(var i=0;i<40;i++) { browser_grid+=onegrid; }  $visible_grid.append(browser_grid)

Looks pretty similar but only use 2 loops with 40 iterations, instead of 40 loops with 40 iterations each, better perf I guess :)

Collectives™ on Stack Overflow

Nested for-loop only executing once

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related