如何在这个Pixel Art Maker中修复Javascript中的颜色事件函数？_Javascript_Events

如何在这个Pixel Art Maker中修复Javascript中的颜色事件函数？

javascript events

如何在这个Pixel Art Maker中修复Javascript中的颜色事件函数？,javascript,events,Javascript,Events,我需要知道如何清除一切时，点击提交，这样它将再次工作没有任何问题我创建了项目，当放置宽度和高度并单击“提交”（第一次）时，一切都正常。创建的表格和所有内容都正常工作，您也可以放置任何颜色，但单击“提交”（第二次）时出现问题。创建的表格但我不能使用颜色，但单击“提交”（第三次）时颜色正在工作，因此每次单击“提交”时如何清除所有内容 Html: <!DOCTYPE html> <html> <head> <title>Pixel Art Ma

我需要知道如何清除一切时，点击提交，这样它将再次工作没有任何问题

我创建了项目，当放置宽度和高度并单击“提交”（第一次）时，一切都正常。创建的表格和所有内容都正常工作，您也可以放置任何颜色，但单击“提交”（第二次）时出现问题。创建的表格但我不能使用颜色，但单击“提交”（第三次）时颜色正在工作，因此每次单击“提交”时如何清除所有内容

Html:

<!DOCTYPE html>
<html>
<head>
    <title>Pixel Art Maker!</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Monoton">
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <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>

    <script src="designs.js"></script>
</body>
</html>


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

Javascript:

const form = document.querySelector('#sizePicker');

form.addEventListener('submit', formSubmit);

function formSubmit() {
  event.preventDefault();

  const width = document.querySelector('#inputWidth').value;
  const height = document.querySelector('#inputHeight').value;

  makeGrid(width, height);


}

function makeGrid(width, height) {


// Select Width , Height and color values

  const table = document.querySelector('#pixelCanvas');

// Create the Canvas
  let grid = '';

  for(let i = 1; i <= width; i++) {
    grid += `<tr>`
    for(let j = 1; j <= height; j++) {
      grid += `<td class='cell'></td>`;
    }
    grid += `</tr>`;
  }

  table.innerHTML = grid;

  //call the color function
addColor();

}
  // Create event listener for the color

function addColor() {
  const color = document.querySelector('#colorPicker').value;

  document.querySelector('table').addEventListener('click', function(e) {
    if(e.target.classList.contains('cell')) {
      const event = e.target;
      console.log('berfore ask', e.target);
      if(event.hasAttribute('style')) {
        console.log('there is style attr to remove', e.target);

        event.removeAttribute('style');

      } else {
        console.log('there is no att so we create it', e.target);

        event.style.backgroundColor = color;
      }
    }
  });
}

const form=document.querySelector（'sizePicker'）；
表格.附录列表（“提交”，表格提交）；
函数formSubmit（）{
event.preventDefault（）；
常量宽度=document.querySelector（'#inputWidth'）.value；
常量高度=document.querySelector（'#inputHeight'）.value；
makeGrid（宽度、高度）；
}
函数makeGrid（宽度、高度）{
//选择宽度、高度和颜色值
const table=document.querySelector（“#像素画布”）；
//创建画布
让网格=“”；
对于（让i=1；i问题是，每次提交时，您都会添加一个新的侦听器，而不删除旧的侦听器。因此，第一次它会按照您希望的方式工作。第二次它有两个侦听器，单击它时，首先添加颜色，然后在第二个事件侦听器上删除它。现在，如果我们继续提交，当它是一个侦听器的偶数。如果侦听器的数目为奇数，则其行为将与预期的一样
这就是我要做的（只需对代码进行最小的更改）
//选择颜色输入
//选择大小输入
//当用户提交大小时，调用makeGrid（）
const form=document.querySelector（“#sizePicker”）；
表格.附录列表（“提交”，表格提交）；
document.querySelector（'table'）。addEventListener（'click'，eventListener）；
函数formSubmit（）{
event.preventDefault（）；
常量宽度=document.querySelector（'#inputWidth'）.value；
常量高度=document.querySelector（'#inputHeight'）.value；
makeGrid（宽度、高度）；
}
函数makeGrid（宽度、高度）{
//选择宽度、高度和颜色值
const table=document.querySelector（“#像素画布”）；
//创建画布
让网格=“”；
for（设i=1；i
// Select color input


// Select size input

// When size is submitted by the user, call makeGrid()

const form = document.querySelector('#sizePicker');

form.addEventListener('submit', formSubmit);
document.querySelector('table').addEventListener('click', eventListener);

function formSubmit() {
  event.preventDefault();

  const width = document.querySelector('#inputWidth').value;
  const height = document.querySelector('#inputHeight').value;

  makeGrid(width, height);


}

function makeGrid(width, height) {


// Select Width , Height and color values

  const table = document.querySelector('#pixelCanvas');

// Create the Canvas
  let grid = '';

  for(let i = 1; i <= width; i++) {
    grid += `<tr>`
    for(let j = 1; j <= height; j++) {
      grid += `<td class='cell'></td>`;
    }
    grid += `</tr>`;
  }

  table.innerHTML = grid;
}
  // Create event listener for the color


function eventListener(e) {
  const color = document.querySelector('#colorPicker').value;
    if(e.target.classList.contains('cell')) {
      const event = e.target;
      console.log('berfore ask', e.target);
      if(event.hasAttribute('style')) {
        console.log('there is style attr to remove', e.target);

        event.removeAttribute('style');

      } else {
        console.log('there is no att so we create it', e.target);

        event.style.backgroundColor = color;
      }
    }
  }