前端绘图项目：gridSize调节按钮失效及默认16*16网格不生效问题

核心问题 #

按钮点击后网格不更新，是因为每次调用fillScreen()时没有清除容器内已有的旧网格元素，新生成的网格叠加在旧元素之上，导致视觉上无变化。

具体修复步骤 #

1. 给fillScreen()添加清空旧网格的逻辑 #

修改fillScreen()函数，每次生成新网格前先清空容器内的旧元素：

function fillScreen() {
  // 清空容器内的旧网格
  container.innerHTML = '';
  
  // 原有网格生成逻辑
  const squareSize = container.clientWidth / gridSize;
  for (let i = 0; i < gridSize * gridSize; i++) {
    const square = document.createElement('div');
    square.classList.add('square');
    square.style.width = `${squareSize}px`;
    square.style.height = `${squareSize}px`;
    container.appendChild(square);
  }
}

2. 完善调节按钮的尺寸限制逻辑 #

给加减按钮的事件处理添加gridSize的取值范围限制，避免出现过小或过大的网格：

// 粗调增加
increaseGridBtn.addEventListener('click', () => {
  if (gridSize < 100) {
    gridSize += 8;
    fillScreen();
  }
});

// 细调增加
increaseGridSmallBtn.addEventListener('click', () => {
  if (gridSize < 100) {
    gridSize += 2;
    fillScreen();
  }
});

// 粗调减少
decreaseGridBtn.addEventListener('click', () => {
  if (gridSize > 2) {
    gridSize -= 8;
    fillScreen();
  }
});

// 细调减少
decreaseGridSmallBtn.addEventListener('click', () => {
  if (gridSize > 2) {
    gridSize -= 2;
    fillScreen();
  }
});

3. 验证开始按钮功能 #

开始按钮的gridSize=16设置逻辑本身没问题，加上第一步的清空容器操作后，点击就能正常生成16×16的网格。

修复原理 #

清空旧网格避免元素叠加干扰显示，限制gridSize范围防止出现不合理的网格尺寸，保证每次按钮点击后都能生成符合预期的新网格。

内容的提问来源于stack exchange，提问作者brian-w119