浏览器表示二维对象未定义

Question

document.addEventListener("DOMContentLoaded", () => {
const keypad = document.querySelector("#keypad");
const widthN = 4;
const heightN = 5;
const keysN = [];
const widthA = 7;
const heightA = 5;
const keysA = [];
let button_dataN = [
[ "C",  "()", "%", "/" ],
[ "7",  "8",  "9", "*" ],
[ "4",  "5",  "6", "-" ],
[ "1",  "2",  "3", "+" ],
["+/-", "0",  ".", "=" ]
];
createKeypadN()
function createKeypadN() {
keyPadBody = document.createElement("div");
keyPadBody.setAttribute("id", "keyPadBody")
keypad.appendChild(keyPadBody);
for (let i = 0; i < widthN * heightN; i++) {
for (let j = 0; j < widthN; j++) {
const key = document.createElement("button");
key.innerHTML = button_dataN[i][j];
key.setAttribute("id", button_dataN[i][j]);
keyPadBody.appendChild(key);
keyPadBody.style.height = "250px";
keyPadBody.style.width = "200px";
key.style.height = "50px";
key.style.width = "50px";
keysN.push(key);
}
}
}
})

<div id="keypad"></div>

整个代码运行良好，但浏览器抛出了以下内容：

*

未捕获类型错误：button_dataN[i]未定义createKeypadNfile:///home/path/to/calculator/main.js:38file:///home/path/to/calculator/main.js:95EventListener.handleEvent*file:///home/path/to/calculator/main.js:1

Answer 1

更换

for (let i = 0; i < widthN * heightN; i++) {
for (let j = 0; j < widthN; j++) {

带有

for (let i = 0; i < heightN; i++) {  // Each "rows"
for (let j = 0; j < widthN; j++) {  // Each "columns"

这些i和j变量是循环索引。。。有一个循环要通过"；行">和一个通过"；列">你似乎把它解释成一张说明书。

使用您的代码，您可以循环从0到19的行，整数为0到4。

因此，当脚本尝试button_dataN[5][0]时发生了错误。

Answer 2

请考虑此代码

document.addEventListener('DOMContentLoaded', ()=>
{
const 
keypad = document.querySelector('#keypad')
, keysN  = []
, button_dataN =
[ [  'C', '()', '%', '/' ] 
, [  '7',  '8', '9', '*' ] 
, [  '4',  '5', '6', '-' ] 
, [  '1',  '2', '3', '+' ] 
, [ '+/-', '0', '.', '=' ] 
];
keyPadBody    = keypad.appendChild(document.createElement('div'))
keyPadBody.id = 'keyPadBody';
for (let keyVal of  button_dataN.flat())
{
let key = keyPadBody.appendChild( document.createElement('button'))
key.textContent = key.id  = keyVal;
keysN.push(key);
}
})

#keyPadBody {
height: 250px;
width : 200px;
}
#keyPadBody button {
height: 50px;
width : 50px;
}

<div id="keypad"></div>