试图用普通Javascript创建动态表，代码无效

我正在努力构建的内容：

我正在尝试构建一个像素艺术制作工具，它本质上是一个由用户决定大小的空网格，当你点击它时，网格中每个框的颜色都会改变

问题：

我设法找出了颜色的变化，但根本无法让桌子显示出来

我已经看过了 这似乎是我能找到的最接近我想要实现的目标的东西。有一个类似于表的逻辑，但我太缺乏经验，无法理解该代码和我的代码之间的差异

Codepen:

下面是我的代码片段：

const canvas=document.querySelector（“#像素画布”）
const tbody=document.createElement（'tbody'）；
canvas.addEventListener（'click'，函数（e）{
e、 target.style.background='black'；
});
canvas.addEventListener（'dblclick'，函数（e）{
e、 target.style.backgroundColor='白色'；
});
//存储列的值
const column=document.getElementById（'column'）。值；
//存储行的值
const row=document.getElementById（'row'）.value；
//访问表单
const submitForm=document.querySelector（“#submitForm”）；
submitForm.addEventListener（'submit'，函数（e）{
e、 preventDefault（）；//默认情况下，阻止提交按钮刷新页面
调试器；
对于（r=0；r
像素艺术制作人
网格大小
柱：
排：

这是因为您在开始时调用了行数和列数，因此在开始时调用它的NULL，在单击提交后获取行数和列数。
签出此小提琴：

const canvas=document.querySelector（“#像素画布”）
const tbody=document.createElement（'tbody'）；
canvas.addEventListener（'click'，函数（e）{
e、 target.style.background='black'；
});
canvas.addEventListener（'dblclick'，函数（e）{
e、 target.style.backgroundColor='白色'；
});
//存储列的值
//访问表单
const submitForm=document.querySelector（“#submitForm”）；
submitForm.addEventListener（'submit'，函数（e）{
e、 preventDefault（）；//默认情况下，阻止提交按钮刷新页面
tbody.innerHTML=''；
const column=document.getElementById（'column'）。值；
//存储行的值
const row=document.getElementById（'row'）.value；
控制台日志（行）；
对于（r=0；r
/**
*index.scss
*-在此处添加您想要的任何样式！
*/
身体{
背景:#f5；
}
桌子、车斗、t车身、t脚掌、tr、td{
边界塌陷：塌陷；
边框：3倍纯黑；
}
运输署{
宽度：30px；
}
tr{
高度：30px；
}

像素艺术
像素艺术制作人
网格大小
柱：
排：


const

变量（行和列）赋值不应该有

。value

与它们一起在

submit

的click函数中获取它们的值，因为您在开始时为它们设置了一个空值，因此循环不起作用。@Viksool非常感谢您！这是一个非常清楚的解释，解决了问题。例如，如果要将旧网格从5x5更改为6x6，您知道如何删除它吗？在

submit

按钮上，单击事件调用

document.getElementById（'pixelCanvas'）。innerHTML=''开头。@Viksool非常感谢：）非常感谢！这解决了主要问题，但不幸的是，现在我有了一个新问题。例如，当我添加5x5网格时，尝试将其更改为6x6不会删除旧网格。它在旧的5x5网格上添加另一个网格。你知道怎么修吗？它能用！！伙计，我花了好几天的时间想弄明白。非常感谢@Harish！