带有 div 的 JS 上的 10x10 板

Question

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

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 table，在句子 9 ( column.innerHTML = '100'; ) 如果我写而不是 '100'，你好 - 他会写 未定义。但如果我写“100”，他会写 100 次（10x10），100。为什么？我该如何解决？

Answer 1

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

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

此外，与确切的问题没有太大关系，但可能是您无法理解代码问题的原因，请注意 WAY 你初始化这个变量。您使用 var，var 是一个函数范围，并且会抛出一个未定义的地方，因为 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>

操作顺序已更改...这将抛出未定义，因为变量的初始化使用 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>

注意错误而不是未定义... "Uncaught ReferenceError: Cannot access 'hello' before initialization"

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

带有 div 的 JS 上的 10x10 板

10x10 board on JS with divs

html

javascript

css

appendchild

createelement