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.

HTML:

<!DOCTYPE html>

<head>
    <title>Etch-a-Sketch</title>
    <link rel="stylesheet"  href="style.css">
    <script  src="app.js"></script>
</head>

<body>
    <div id="container">
    </div>

</body>

Javascript:

//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() {
    makeRows(16);
    makeColumns(16);
}

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

    };
};

CSS:

.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 : XYZScripts.com