10x10 board on JS with divs

Question

Could someone help me how should I make a board 10x10 using divs only on JS with content? I made a board 10x10 with no problems, but I couldn't fill divs with content... Code:

var hello = 100;
function createBoard() {
    // Height
    for(a=0; a<10; a++) {
        var row = document.createElement("div");
        document.getElementById("board").appendChild(row);
        for(b=0; b<10; b++) {
            var column = document.createElement("div"); 
            column.innerHTML = 'hello';
            row.appendChild(column);
        }
    }
}

My code makes a 10x10 div table, in the sentence 9 ( column.innerHTML = '100'; ) if I write instead of '100', hello - he will write undefined. But if I write it '100' he will write 100 times ( 10x10 ), 100. Why? How should I fix it?

Answer 1

Make sure you are initiating your variables in your loops. Lastly, if you are looking for a grid type layout, make the containing div a flexbox display.

EDIT: If you look closely at the order of operations in your code, you are calling your function AFTER you define your variable, hello.

Moreover, not so much related to the exact issue, but potentially a reason you were not able to see why you got the issue with your code, take note of the WAY you initialize the variable. You use var, var is a function scope and will throw an undefined where as const and let will throw errors...

#board {
  display: flex;
}

function createBoard() {
    const hello = 100;
    for(let a=0; a<10; a++) {
        var row = document.createElement("div");
        document.getElementById("board").appendChild(row);
        row.className = 'row';
        for(let b=0; b<10; b++) {
            var column = document.createElement("div"); 
            column.innerHTML = hello;
            column.className = 'column';
            row.appendChild(column);
    
        }
    }
    
}

createBoard()

#board {
  display: flex;
}

.column {
  padding: 5px;
}

<div id="board"></div>

Order of operations changed... This will throw the undefined as the initialization of the variable is using the var type. replace this with let or const and you will get an error. The take off, use let and const over var unless you have a very specific reason for needing your variables definition to be able to be changed outside of block scope.

createBoard()

var hello = 100;

function createBoard() {
    
    for(let a=0; a<10; a++) {
        var row = document.createElement("div");
        document.getElementById("board").appendChild(row);
        row.className = 'row';
        for(let b=0; b<10; b++) {
            var column = document.createElement("div"); 
            column.innerHTML = hello;
            column.className = 'column';
            row.appendChild(column);
    
        }
    }
    
}

#board {
  display: flex;
}

.column {
  padding: 5px;
}

<div id="board"></div>

Now lets change the initialization type to let and see what we get when order of operations is not correct.

createBoard()

let hello = 100; // this will show an error using 'const' initialization as well

function createBoard() {
    
    for(let a=0; a<10; a++) {
        var row = document.createElement("div");
        document.getElementById("board").appendChild(row);
        row.className = 'row';
        for(let b=0; b<10; b++) {
            var column = document.createElement("div"); 
            column.innerHTML = hello;
            column.className = 'column';
            row.appendChild(column);
    
        }
    }
    
}

#board {
  display: flex;
}

.column {
  padding: 5px;
}

<div id="board"></div>

Note the error instead of undefined... "Uncaught ReferenceError: Cannot access 'hello' before initialization"

This error passing is precisely why you should stop using var and start using let or const unless you have a specific reason you want to pass function scope. Using var you get no clue as to why the code is not working, where as the newer form of variable initialization using let or const will throw potential errors to assist in your trouble shooting.