Try to search your question here, if you can't find : Ask Any Question Now ?

Creating 16×16 grid using Javascript

HomeCategory: stackoverflowCreating 16×16 grid using Javascript
Avatargaurav asked 1 month ago

I’m trying to create a 16×16 grid in Javascript. The method I’m trying to use is to create an empty div in HTML, and then append other divs to it, and outline their borders. I can’t seem to make this work, and I’ve put my code below.


<!DOCTYPE html>

    <link rel="stylesheet"  href="style.css">
    <script  src="app.js"></script>

    <div id="container">



//Sets important constants and variables

const container = document.getElementById("container");
let rows = document.getElementsByClassName("gridRow");
let cells = document.getElementsByClassName("cell");

//Creates a default grid sized 16x16 
function defaultGrid() {

//Takes (rows, columns) input and makes a grid
function makeRows(rowNum) {

    //Creates rows
    for (r = 0; r < rowNum; r++) {
        let row = document.createElement("div");
        container.appendChild(row).className = "gridRow";

//Creates columns
function makeColumns(cellNum) {
    for (i = 0; i < rows.length; i++) {
        for (j = 0; j < cellNum; j++) {
            let newCell = document.createElement("div");
            rows[j].appendChild(newCell).className = "cell";



.gridRow {
    border: 1px solid black;

.cell {
    border: 1px solid black;
1 Answers
Best Answer
Avatarnaveen answered 1 month ago
Your Answer

20 + 3 =

Popular Tags

WP Facebook Auto Publish Powered By :