trying to create a grid by user input with javascript and DOM manipulation

Trying to make a grid with user input (ex. if they put 4 in, 4X4 grid.)

But I can’t seem to make my code go down to the next row after it prints the 4th ‘div’.

Any help would be appreciated, been stumped for days on this!

JAVASCRIPT CODE

const container = document.querySelector('#container');

// Create boxes
function createBoxes (numBox) {

for (let i =0; i < numBox*numBox; i++){
    for (let j =0; j < (numBox - 1); j++){
        const square = document.createElement('div');
        square.setAttribute('class', 'box');
        square.style.width = '25px';
        square.style.height = '25px';
        container.appendChild(square);
        
    }
    
}
}


createBoxes(2);

CSS CODE:

.box {
  border: 1px solid red;
  box-sizing: border-box;
  display: inline-block;
 }

.container {
width: 500px;
height: 500px;

}

HTML CODE:

<div id='container></div>

72 thoughts on “trying to create a grid by user input with javascript and DOM manipulation”