带有 div 的 JS 上的 10x10 板

问题描述

有人可以帮助我如何制作 board 10x10 仅在 JS 带有内容 上使用 divs 吗？ 我做了一个 10x10 的板子，没有问题，但我无法用内容填充 div... 代码：

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);
        }
    }
}

我的代码创建了一个 10x10 div 表，在句子 9 ( column.innerHTML = '100'; ) 中，如果我写而不是 '100'，你好 - 他会写 undefined。但是如果我写'100'，他会写100次（10x10），100次。为什么？我该如何解决？

解决方法

确保在循环中初始化变量。最后，如果您正在寻找网格类型的布局，请将包含的 div 设为 flexbox 显示。

编辑：如果您仔细查看代码中的操作顺序，您会在定义变量 hello 之后调用函数。

此外，与确切问题没有太大关系，但可能是您无法了解代码出现问题的原因，请注意方式 你初始化变量。您使用 var，var 是一个函数作用域，会抛出一个 undefined ，而 const 和 let 会抛出错误...

#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>

操作顺序已更改...这将抛出 undefined 因为变量的初始化使用 var 类型。用 let 或 const 替换它，你会得到一个错误。起飞，使用 let 和 const 而不是 var 除非您有非常具体的原因需要您的变量定义能够在块范围之外进行更改。

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>

现在让我们将初始化类型更改为 let，看看当操作顺序不正确时我们会得到什么。

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>

注意错误而不是未定义... “未捕获的引用错误：初始化前无法访问‘hello’”

这个错误传递正是为什么你应该停止使用var并开始使用let或const，除非你有您想传递函数作用域的特定原因。使用 var 您不知道为什么代码不起作用，因为使用 let 或 const 的较新形式的变量初始化会抛出潜在错误以帮助您解决问题。