Pixel Art Maker网格生成失效问题技术求助

你的Pixel Art Maker工具出现的问题主要由几个语法错误和逻辑问题导致，以下是具体的修复点：

1. 表单事件监听拼写错误 #

你将表单提交事件写成了 'sumbit'，正确的事件名称是 'submit'。这个错误导致表单提交时你的监听函数根本不会触发，页面会默认刷新并重置所有设置。

修复代码：

sizePicker.addEventListener('submit', function(event) { // 修正拼写
  event.preventDefault();
  // ... 其他代码
});

2. 颜色选择器初始化错误 #

你一开始就把 colorPicker 赋值为颜色选择器的初始值（黑色），这意味着后续点击单元格时永远只会应用初始颜色，不会获取当前选择的颜色。应该存储颜色选择器的DOM元素引用，而不是它的初始值。

修复代码：

let colorPicker = document.getElementById("colorPicker"); // 移除 .value

3. 函数声明语法错误 #

makeGrid 函数声明后多了一个分号，这会导致语法错误，函数无法正常定义。

修复代码：

function makeGrid(height, width) { // 移除后面的分号
  // ... 函数内容
}

4. 函数内变量重复定义与类型错误 #

在 makeGrid 函数内，你重新定义了 height 和 width 为DOM元素，而不是使用传入的参数。同时，输入框的值是字符串类型，直接用于循环会导致异常，需要转换为数字。

修复代码：
删除函数内的这两行：

let height = document.getElementById("inputHeight");
let width = document.getElementById("inputWidth");

替换为将传入的参数转换为整数：

const gridHeight = parseInt(height, 10);
const gridWidth = parseInt(width, 10);

并在循环中使用转换后的变量：

for (let i = 0; i < gridHeight; i++) {
  // ... 行创建代码
  for (let j = 0; j < gridWidth; j++) {
    // ... 单元格创建代码
  }
}

完整修复后的JavaScript代码 #

let colorPicker = document.getElementById("colorPicker");
let table = document.getElementById("pixelCanvas");
let sizePicker = document.getElementById("sizePicker");

sizePicker.addEventListener('submit', function(event) {
  event.preventDefault();
  let height = document.getElementById("inputHeight").value;
  let width = document.getElementById("inputWidth").value;
  makeGrid(height, width);
});

function makeGrid(height, width) {
  const gridHeight = parseInt(height, 10);
  const gridWidth = parseInt(width, 10);
  table.innerHTML = null;
  
  for (let i = 0; i < gridHeight; i++) {
    let row = table.insertRow(i);
    for (let j = 0; j < gridWidth; j++) {
      let cell = row.insertCell(j);
      cell.addEventListener("click", function() {
        cell.style.backgroundColor = colorPicker.value;
      });
      cell.addEventListener("dblclick", function() {
        cell.style.backgroundColor = "";
      });
    }
  }
}

内容的提问来源于stack exchange，提问作者Newbie82