JavaScript像素画网格开发问题求助：旧网格无法清空及单元格着色失效

Hey there! Let’s work through solving both of your problems step by step:

1. Clearing the Old Grid Before Creating a New One #

Right now, when you submit a new grid size, the code just stacks new rows and cells on top of the existing ones. To fix this, we need to wipe out the old grid first at the start of the makeGrid function.

Add this line right after the function opens:

table.innerHTML = '';

This will completely clear all existing rows and cells before building your new grid.

2. Adding Color to Grid Cells #

Your color-click functionality has a few small kinks—let’s iron them out:

Problem 1: Cells don’t have the "cell" class #

When you create cells with row.insertCell(), you never assign the cell class to them. That means getElementsByClassName("cell") returns an empty list, so your click listener never attaches to anything. Fix this by adding the class when you create each cell:

cell.classList.add('cell');

Problem 2: Attaching click events incorrectly #

getElementsByClassName returns an HTMLCollection (a list of elements), not a single element—you can’t add an event listener directly to the whole collection. You have two solid options here:

Option A: Add click events as you create cells

Modify your cell creation loop to attach the click handler right when each cell is made. This is straightforward for small grids:

for (var h = 0; h < height; h++){
  const cell = row.insertCell();
  cell.classList.add('cell');
  // Add click handler to color this cell
  cell.addEventListener('click', function() {
    this.style.backgroundColor = inputColor.value;
  });
}

Option B: Use event delegation (better for large grids)

Instead of adding a listener to every single cell, add one listener to the table itself. Clicks on cells will bubble up to the table, and we can target only the cells:
Add this outside your makeGrid function (right after your other element selectors):

table.addEventListener('click', function(event) {
  // Only act if the clicked element is a table cell
  if (event.target.tagName === 'TD') {
    event.target.style.backgroundColor = inputColor.value;
  }
});

If you use this option, you can remove all the click listener code inside makeGrid entirely.

Problem 3: Incorrect color reference & broken extra code #

You were using inputColor directly, but that’s the DOM element—you need its value property: inputColor.value. Also, lines like document.appendChild("cell") and table.innerHTML = grid are unnecessary and broken, so delete them completely.

Full Corrected makeGrid Function #

Here’s how the function should look with both fixes (using Option A for cell clicks):

function makeGrid() {
  // Clear existing grid first
  table.innerHTML = '';
  
  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();
      cell.classList.add('cell');
      // Add click handler to color the cell
      cell.addEventListener('click', function() {
        this.style.backgroundColor = inputColor.value;
      });
    }
  }
}

Give these changes a test drive, and your pixel art tool should work exactly as you want it to!

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