Creating a dynamic grid with Javascript

Question

I'm very new to JS so pardon anything that may be totally, utterly wrong.

I'm trying to create a 16x16 grid of divs dynamically. My logic is that I'd create a container for all of the grid, inside the container I'd append 16 rows and in each row I'd append 16 boxes. I have a rough idea of my code and I wanted to check if it is valid logic and JS.

/* Creating the grid */
function grid() {
    var container = document.createElement("div");
    container.id = "main";
    container.className = "container";

    for (i=0, i<16, i+=1) {
        var row = document.getElementbyId('main').appendChild('div');
        row.className = "row";
        row.id = "row" + i;
    };

    for (j=0, j<16, j+=1) {
        for (k=0, k<16, k+=1) {
            var box = document.getElementbyId("row" + j).appendChild('div');
            box.className = "box";
        };
    };
};

It is not. .appendChild accepts nodes, not strings. You should change appendChild('div') to appendChild(document.createElement("div")) — w35l3y
– w35l3y, Commented Aug 3, 2015 at 1:45
oh yes I forgot about that. You have to create the element before appending it. — Ken Kwok
– Ken Kwok, Commented Aug 3, 2015 at 2:07

Gyrocode.com · Accepted Answer · 2015-08-03 02:14:13Z

CAUSE

There are some issues with the code.

Syntax for for loop is for(init;condition;final-expression), see manual for for.
appendChild requires nodes not strings.
Function grid() doesn't do anything. It should either return a node, accept a node to append to or insert content somewhere, it's up for you to decide.

DEMO

See the demo below for corrected code and demonstration.

/* Creating the grid */
function grid(el) {
    var container = document.createElement("div");
    container.id = "main";
    container.className = "container";

    for (i=0; i<16; i+=1) {
        var row = document.createElement("div");
        row.className = "row";
        row.id = "row" + i;
      
        for (k=0; k<16; k+=1) {
            var box = document.createElement("div"); 
            box.className = "box";
            row.appendChild(box);
        };
      
        container.appendChild(row);      
    };
  
    el.appendChild(container);
};

grid(document.body);

.row {
  border:1px solid green;  
  height:1em;
  line-height:1em;
}

.box {
  display:inline-block;
  width:6.25%;
  height:1em;
  box-sizing:border-box;
  border:1px solid red; 
}

iplus26 · Accepted Answer · 2015-08-03 02:03:09Z

You should pay attention to your misuse of syntax in for loop.

You may want this:

'use strict';

function grid() {
    var container = document.createElement('div');
    container.id = "main";
    container.className = "container";

    for (var i = 0; i < 16; i++) {

        var row = document.createElement('div');
        row.className = "row";
        row.id = "row" + i;

        for (var j = 0; j < 16; j++) {
            var box = document.createElement('div');
            box.className = 'box';
            row.appendChild(box);
        }

        container.appendChild(row);
    }

    return container;
}

console.log(grid());

// and you should use 
// document.getElementById('xxx').appendChild(grid());

You may refer to:

Document.getElementById()
Node.appendChild()
Document.createElement()
Nicholas C. Zakas - Speed up your JavaScript, Part 4, which tells that you might append all the child nodes to the parent node, and then append the parent node to its parent node.

BahaEddine Ayadi · Accepted Answer · 2015-08-03 02:04:23Z

You have so many syntax errors that you need to be aware of, like :

The for loop, it should contain semi colons not commas...

And you need to create the div everytime before appending it, like you did for the container.

Here's a working code :

function grid(){
    var container = document.createElement("div");
    container.id = "main";
    container.className = "container";
    document.body.appendChild(container);
    var main = document.getElementById('main');
    for (var i=0; i<16; i++) {
        var row = document.createElement("div");
        row.className = "row";
        row.id = "row" + i;
        main.appendChild(row);
        var roww = document.getElementById('row'+i);
        for (var j=0; j<16; j++) {
            var box = document.createElement("div");
            box.className = "box";
            roww.appendChild(box);
        }
    }
}
window.onload = grid();

Here's A fiddle

w35l3y · Accepted Answer · 2015-08-03 02:09:42Z

0

/* Creating the grid */
function grid (content) {
    var container = content.appendChild(document.createElement("div"));
    container.id = "main";
    container.className = "container";

    for (var i = 0;i < 16;++i) {
        var row = container.appendChild(document.createElement("div"));
        row.className = "row";
        row.id = "row" + i;
        for (var k = 0;k < 16;++k) {
            var box = row.appendChild(document.createElement("div"));
            box.className = "box";
        }
    }
}

grid(document.body)

Some errors in your code:

container needs to be inserted somewhere too.
appendChild accepts nodes, not strings
for loop uses ; to separate expressions, not , (they all are optional)

edited Aug 3, 2015 at 2:09

answered Aug 3, 2015 at 1:54

w35l3y

8,8333 gold badges41 silver badges53 bronze badges

Comments

sjm · Accepted Answer · 2015-08-03 22:05:55Z

0

Yep the logic is correct although theres a number of syntax/type errors and it would be more efficient too store reusable variables and to have only 2 loops as below

function grid(d) {
 var container = d.createElement("div");
 container.id = "main";
 container.className = "container";

  for (i=0; i<16; i++) {
    var row = container.appendChild(d.createElement('div'));
    row.className = "row";
    row.id = "row" + i;

     for (k=0; k<16; k++) {
        var box = row.appendChild(d.createElement('div'));
        box.className = "box";
     };
  };

  d.body.appendChild(container);

};

grid(document);

edited Aug 3, 2015 at 22:05

answered Aug 3, 2015 at 1:53

sjm

5,5181 gold badge28 silver badges37 bronze badges

Collectives™ on Stack Overflow

Creating a dynamic grid with Javascript

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related