创建可着色、可单击的网格（javascript）

我正在做一个学校项目（我的编程入门课程的最后一个项目）。已经给出了html和css。我们需要允许用户创建网格，然后创建颜色框来制作像素艺术

我遇到了两个问题

当用户点击submit创建新表时，“我的表”未清除，并且

我无法将颜色输入网格

我真的很感激能给我的任何帮助

// Select color input
let inputColor = document.getElementById ("colorPicker");

// Select size input
let table = document.getElementById("pixelCanvas");
let iHeight = document.getElementById ("inputHeight");
let iWidth = document.getElementById ("inputWidth");


// Make the grid
let sPicker = document.getElementById("sizePicker");
sPicker.addEventListener("submit", function(event) {
  event.preventDefault();
  makeGrid()
});


// When size is submitted by the user, call makeGrid()
function makeGrid() {
  const height = iHeight.value;
  const width = iWidth.value;
  for (var w = 0; w < width; w++){
    const row = table.insertRow();
    for (var h = 0; h < height; h++){
      const cell = row.insertCell();
    }
  }
  let cPicker = document.getElementsByClassName("cell");
  cPicker.addEventListener("click", function (event) {
    event.preventDefault();
    cell.style.backgroundColor = inputColor;
    document.appendChild("cell");
    table.innerHTML = grid;
  });
}

//选择颜色输入
让inputColor=document.getElementById（“颜色选择器”）；
//选择大小输入
let table=document.getElementById（“像素画布”）；
设iHeight=document.getElementById（“inputHeight”）；
让iWidth=document.getElementById（“inputWidth”）；
//制造网格
让sPicker=document.getElementById（“sizePicker”）；
sPicker.addEventListener（“提交”，函数（事件）{
event.preventDefault（）；
makeGrid（）
});
//当用户提交大小时，调用makeGrid（）
函数makeGrid（）{
const height=iHeight.value；
常数宽度=iWidth.value；
对于（var w=0；w

代码的其余部分如下所示：

---

幸运的是，我能解决你的问题。 如果你需要更多的解释，请在下面留下评论，这样我可以解释

let table=document.getElementById（“像素画布”）；
设iHeight=document.getElementById（“inputHeight”）；
让iWidth=document.getElementById（“inputWidth”）；
让sPicker=document.getElementById（“sizePicker”）；
sPicker.addEventListener（“提交”，函数（事件）{
event.preventDefault（）；
makeGrid（）
});
函数makeGrid（）{
table.innerHTML=''；
const height=iHeight.value；
常数宽度=iWidth.value；
让inputColor=document.getElementById（“colorPicker”）.value；
对于（var w=0；w

正文{
文本对齐：居中；
}
h1{
字体系列：单调；
字体大小：70px；
边缘：0.2米；
}
氢{
边缘：1米0.25米；
}
h2：第一种类型{
边缘顶部：0.5em；
}
桌子
tr，
运输署{
边框：1px纯黑；
}
桌子{
边界塌陷：塌陷；
保证金：0自动；
}
tr{
高度：20px；
}
运输署{
宽度：20px；
}
输入[类型=数字]{
宽度：6em；
}

像素艺术制作人！
像素艺术制作人
选择网格大小
网格高度：
网格宽度：
挑选颜色
设计画布

听你的话，我想你会想要的

单击“提交”时，应重置现有表

更改颜色并单击任何单元格时，该单元格将仅填充选定颜色

我对js和html文件做了一些修改

Html文件更改：将表替换为具有相同id的div

JS更改错误地附加了事件侦听器

试试这个

//选择颜色输入
让inputColor=document.getElementById（“颜色选择器”）；
//选择大小输入
让tableCanvas=document.getElementById（“像素画布”）；
设iHeight=document.getElementById（“inputHeight”）；
让iWidth=document.getElementById（“inputWidth”）；
//制造网格
让sPicker=document.getElementById（“sizePicker”）；
sPicker.addEventListener（“提交”，函数（事件）{
event.preventDefault（）；
makeGrid（）
});
//当用户提交大小时，调用makeGrid（）
函数makeGrid（）{
let table=document.createElement（'table'）
const height=iHeight.value；
常数宽度=iWidth.value；
for（设w=0；w{
event.preventDefault（）；
event.target.style.backgroundColor=inputColor.value
})
}
}
让孩子们=tableCanvas.childNodes？tableCanvas.childNodes:[]
if（children&&children.length==1）{
tableCanvas.replaceChild（表，子项[0]）
}否则{
tableCanvas.append（表）
}
}

正文{
文本对齐：居中；
}
h1{
字体系列：单调；
字体大小：70px；
边缘：0.2米；
}
氢{
边缘：1米0.25米；
}
h2：第一种类型{
边缘顶部：0.5em；
}
桌子
tr，
运输署{
边框：1px纯黑；
}
桌子{
边界塌陷：塌陷；
保证金：0自动；
}
tr{
高度：20px；
}
运输署{
宽度：20px；
}
输入[类型=数字]{
宽度：6em；
}

像素艺术制作人！
像素艺术制作人
选择网格大小
网格高度：
网格宽度：
挑选颜色
设计画布

why innerHTML tables content，why不在makeGrid（）中创建一个新表实际上，

innerHTML

会在元素中附加您想要的任何节点（标记-元素）。和

innerHTML=''

，删除表元素中的所有节点。在这种情况下，当您调用

innerHTML='

时，所有

td

s和

tr

s都将被删除，表将准备好追加新的

td

s和

tr

s。关于更多的解释，我想请你参考。@amanda sheard，如果你的问题得到解决，那么我邀请你接受我的回答，如果它是有帮助的（听起来像是），那么也请记住对它投赞成票（如果你还没有）。谢谢你花时间帮忙。使用此代码，它将在创建表时更改整个表。生成后

 /* you didn't attach any class to your cell so you will get null in this,
and getByClassName returns list of elements so you need to iterate over the list to attach event
*/
  let cPicker = document.getElementsByClassName("cell"); 
  cPicker.addEventListener("click", function (event) {
    event.preventDefault();
    cell.style.backgroundColor = inputColor;
    document.appendChild("cell");
    table.innerHTML = grid;
  });