Создание сетки 16x16 с использованием JavaScript

Я пытаюсь создать сетку 16x16 в JavaScript. Метод, который я пытаюсь использовать, - создать пустой HTML-код div, а затем добавить к нему другие элементы div и наметить их границы. Я не могу заставить это работать, и я поместил свой код ниже.

HTML:

<!DOCTYPE html>

<head>
    <title>Etch-a-Sketch</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script type="text/javascript" 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

Было бы намного понятнее использовать CSS-переменные и CSS-сетку для создания динамических строк и столбцов.

const container = document.getElementById("container");

function makeRows(rows, cols) {
  container.style.setProperty('--grid-rows', rows);
  container.style.setProperty('--grid-cols', cols);
  for (c = 0; c < (rows * cols); c++) {
    let cell = document.createElement("div");
    cell.innerText = (c + 1);
    container.appendChild(cell).className = "grid-item";
  };
};

makeRows(16, 16);

:root {
  --grid-cols: 1;
  --grid-rows: 1;
}

#container {
  display: grid;
  grid-gap: 1em;
  grid-template-rows: repeat(var(--grid-rows), 1fr);
  grid-template-columns: repeat(var(--grid-cols), 1fr);
}

.grid-item {
  padding: 1em;
  border: 1px solid #ddd;
  text-align: center;
}

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

Ответ 2

Попробуйте

let n=16, s='';

for(let i=0; i<n; i++) {
  s+= '<div class="row">'
  for(let j=0; j<n; j++) s+= '<div class="cell"> ${(i*n+j).toString(16)} </div>';
  s+= '</div>'
}

container.innerHTML = s;

.row { display: flex; font-size: 9.5px; text-align: center; color: red }
.cell { width: 10px; height: 10px; margin: 1px; border: 1px solid black;}

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

Ответ 3

Решение, предложенное Gerardo Furtado, заключается в изменении CSS.

Старый CSS:

.gridRow {
    border: 1px solid black;
}

.cell {
    border: 1px solid black;
}

Исправлен CSS:

.cell {
  border: 1px solid gray;
  min-width: 10px;
  min-height: 20px;
  display: inline-block;
}

Ответ 4

HTML-код

<html>
<head>
    <link rel=stylesheet type="text/css" href="Project_Javascript_jQuery.css">
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script type="text/javascript" src="Project_Javascript_jQuery.js"></script>
</head>

<body>
<h4><a href="#" onclick="location.href='http://www.theodinproject.com/home'; return false;">The Odin Project</a> >> <a href="#" onclick="location.href='http://www.theodinproject.com/web-development-101'; return false;">Web Development 101</a> >> <a href="#" onclick="location.href='http://www.theodinproject.com/web-development-101#section-the-front-end'; return false;">The Front End</a> >> <a href="#" onclick="location.href='http://www.theodinproject.com/web-development-101/javascript-and-jquery'; return false;">Project: JavaScript and jQuery</a> >> Nick Kessler entry February 6, 2015</h4>

<center><button class="newGrid">New Grid</button></center>

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

<br><br>

</body>

</html>

CSS

 #container {
    position: relative;
    top: 30px;
    outline: 2px solid #000;
    font-size: 0;
    margin: auto;
    height: 960px;
    width: 960px;
    padding: 0;
    border: none;
}

.grid {
    margin: 0;
    padding: 0;
    border: none;
    outline: 1px solid #000;
    display: inline-block;
}

JavaScript

// Function that builds a grid in the "container"
function createGrid(x) {
    for (var rows = 0; rows < x; rows++) {
        for (var columns = 0; columns < x; columns++) {
            $("#container").append("<div class='grid'></div>");
        };
    };
    $(".grid").width(960/x);
    $(".grid").height(960/x);
};

// Function that clears the grid
function clearGrid(){
    $(".grid").remove();
};

// Function that prompts the user to select the number of boxes in a new grid
// the function then also creates that new grid
function refreshGrid(){
    var z = prompt("How many boxes per side?");
    clearGrid();
    createGrid(z);
};

// Create a 16x16 grid when the page loads.
// Creates a hover effect that changes the color of a square to black when the mouse passes over it, leaving a (pixel) trail through the grid
// allows the click of a button to prompt the user to create a new grid
$(document).ready(function() {
    createGrid(16);

    $(".grid").mouseover(function() {
        $(this).css("background-color", "black");
        });

    $(".newGrid").click(function() {
        refreshGrid();

        $(".grid").mouseover(function() {
        $(this).css("background-color", "black");
        });
    });
});