Creating a dynamic grid with Javascript - Stack Overflow

admin管理员组

文章数量:1356294

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

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

• javascript
• dynamic

Share Improve this question Follow asked Aug 3, 2015 at 1:34 haigmachaigmac 2311 gold badge11 silver badge44 bronze badges 2

• 1 It is not. .appendChild accepts nodes, not strings. You should change appendChild('div') to appendChild(document.createElement("div")) – 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 Commented Aug 3, 2015 at 2:07

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 3

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

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.

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

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

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

/* 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)

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

本文标签： Creating a dynamic grid with JavascriptStack Overflow