您有不必要的错误。我在下面的代码片段中修复了所有这些问题。

大多数错误来自打字错误、冗余的Get值、传递错误的类型参数和获取元素的错误时刻。

这里值得注意的是如何将backgroundColor设置为空。您应该使用transparent或inherit，而不是""。检查这个答案。

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) {
    table.innerHTML = null;
    for (let i = 0; i < height; i++) {
        let row = table.insertRow(i);
        for (let j = 0; j < width; j++) {
            let cell = row.insertCell(j);
            cell.addEventListener("click", function (event) {
                let colorPicker = document.getElementById("colorPicker").value;
                cell.style.backgroundColor = colorPicker;
            });
            cell.addEventListener("dblclick", function (event) {
                cell.style.backgroundColor = "inherit";
            });
        }
    }
}

body {
  text-align: center;
}

h1 {
  font-family: Monoton;
  font-size: 70px;
  margin: 0.2em;
}

h2 {
  margin: 1em 0 0.25em;
}

h2:first-of-type {
  margin-top: 0.5em;
}

table,
tr,
td {
  border: 1px solid black;
}

table {
  border-collapse: collapse;
  margin: 0 auto;
}

tr {
  height: 20px;
}

td {
  width: 20px;
}

input[type=number] {
  width: 6em;
}

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Monoton">

<h1>Pixel Art Maker</h1>
<h2>Choose Grid Size</h2>
<form id="sizePicker">
  Grid Height:
  <input type="number" id="inputHeight" name="height" min="1" value="1"> Grid Width:
  <input type="number" id="inputWidth" name="width" min="1" value="1">
  <input type="submit">
</form>
<h2>Pick A Color</h2>
<input type="color" id="colorPicker">
<h2>Design Canvas</h2>
<table id="pixelCanvas"></table>

不断学习，磨砺自己的技能。

让我们不要关注代码中的拼写错误，而只关注主要问题。
您遇到的主要问题是Uncaught SyntaxError: Identifier 'height' has already been declared错误，因此让我们来调查它来自哪里以及原因：

• 如果我们仔细观察，我们会发现您在不同的位置有许多名称相同的变量，您有height作为全局变量，并且您还在form提交侦听器中声明了一个同名的变量height。
• 这不是错误的来源，因为let关键字用于声明height变量，该变量声明块范围的局部变量(源MDN)。所以话虽如此，问题并不是来自于在不同地方使用相同的名字。让我们再深挖一遍。
• 在makeGrid函数中，您期待调用的两个变量，然后是height和width，似乎我们接近了！在同一函数中，我们可以说第一行let height = document.getElementById("inputHeight")是导致Uncaught SyntaxError: Identifier 'height' has already been declared错误的原因，但为什么呢？
• 乍一看，你可能会说*“我没有声明另一个同名的变量，我的height变量是本地的！”*但等等，我们似乎忘记了函数makeGrid需要一个名为height的变量，这就是错误的来源！height是在函数参数上声明的，您试图在执行let height = document.getElementById("inputHeight");时创建一个同名的新变量。

上面的解释对于变量width是正确的，所以我们应该同时修复它们。最简单的解决方案是选择不同的名称，但我宁愿稍微重构您的代码并进行一些改进，这样您就可以最大限度地了解我的答案

这里有一个现场演示，其中包含了大量重要的评论，应该会对你有所帮助：

/**as a rule of thumb, always try to minimize calls to DOM related methods so in our case we cache the elements that we know that we will use them many time. This will improve our code memeory consumption */
const colorPicker = document.getElementById("colorPicker"),
  table = document.getElementById("pixelCanvas"),
  sizePicker = document.getElementById("sizePicker"),
  height = document.getElementById("inputHeight"),
  width = document.getElementById("inputWidth"),
  /**the function "makeGrid" was refactored (a bit) and now it doesn't need the "height" nor the "width" as it'll get those values on its own thanks to the cached variables height and width */
  makeGrid = () => {
    /**this function will use height and width variable to get their realtime values whenever the submit button is clicked. See the below loops declaration */
    table.innerHTML = '';
    for (let i = 0; i < height.value; i++) {
      const row = table.insertRow(i);
      for (let j = 0; j < width.value; j++) {
        const cell = row.insertCell(j);
        /**nothing fancy here just used an arrow function (one liner) */
        cell.addEventListener("click", () => cell.style.backgroundColor = colorPicker.value);
        cell.addEventListener("dblclick", () => cell.style.backgroundColor = "transparent"); /**or any other color you want */
      }
    }
  }

/**listen for submit events and then draw the grid by calling "makeGrid" */
sizePicker.addEventListener('submit', e => e.preventDefault() || makeGrid());

body {
  text-align: center;
}

h1 {
  font-family: Monoton;
  font-size: 70px;
  margin: 0.2em;
}

h2 {
  margin: 1em 0 0.25em;
}

h2:first-of-type {
  margin-top: 0.5em;
}

table,
tr,
td {
  border: 1px solid black;
}

table {
  border-collapse: collapse;
  margin: 0 auto;
}

tr {
  height: 20px;
}

td {
  width: 20px;
}

input[type=number] {
  width: 6em;
}

<!-- no changes made on the HTML nor the CSS part just skip to the JavaScript part -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Monoton">

<h1>Pixel Art Maker</h1>
<h2>Choose Grid Size</h2>
<form id="sizePicker">
  Grid Height:
  <input type="number" id="inputHeight" name="height" min="1" value="1"> Grid Width:
  <input type="number" id="inputWidth" name="width" min="1" value="1">
  <input type="submit">
</form>
<h2>Pick A Color</h2>
<input type="color" id="colorPicker">
<h2>Design Canvas</h2>
<table id="pixelCanvas"></table>

上述演示绝对不是唯一可能的修复/解决方案。此外，我试图让事情变得简单和容易理解。可以对上面的演示应用许多可能的改进，比如使用Event Delegation而不是表格单元格上的许多监听器。

在MDN上了解有关let关键字的更多信息。

在MDN上了解有关const关键字的更多信息。