Etch-a-Sketch项目：Range Slider无法动态调整网格方块数量求助

你的问题核心是仅获取了滑块值，但未触发网格重新生成，且每次生成新网格前未清除旧方块，会导致新旧元素叠加。以下是具体修复方案：

1. 清空旧网格再生成新元素 #

每次调用makeRows前，先清空容器内的旧.square元素，避免叠加。同时给循环变量i加上let，防止污染全局作用域：

function makeRows(rows, cols) {
  // 清空容器内旧方块
  gridContainer.innerHTML = '';
  gridContainer.style.setProperty("--grid-rows", rows);
  gridContainer.style.setProperty("--grid-cols", cols);
  for (let i = 0; i < rows * cols; i++) {
    let cell = document.createElement("div");
    gridContainer.appendChild(cell).className = "square";
  }
}

2. 在滑块事件中触发网格更新 #

原sliderValue函数仅返回数值，未调用生成网格的方法。修改事件监听逻辑，获取滑块值后直接调用makeRows：

const range = document.getElementById("range");
const rangeValue = document.getElementById("rangeValue");

// 滑块事件处理
range.addEventListener("input", function() {
  const size = parseInt(this.value);
  // 同步更新显示的网格尺寸（提升用户体验）
  rangeValue.textContent = `${size}x${size}`;
  // 生成对应尺寸的网格
  makeRows(size, size);
});

3. 初始化时同步显示初始尺寸 #

初始化网格后，把rangeValue的内容设为初始的32x32：

// 初始化网格和显示数值
makeRows(32, 32);
rangeValue.textContent = "32x32";

完整修复代码 #

const gridContainer = document.getElementById("grid-container");

const range = document.getElementById("range");
const rangeValue = document.getElementById("rangeValue");

function makeRows(rows, cols) {
  gridContainer.innerHTML = '';
  gridContainer.style.setProperty("--grid-rows", rows);
  gridContainer.style.setProperty("--grid-cols", cols);
  for (let i = 0; i < rows * cols; i++) {
    let cell = document.createElement("div");
    gridContainer.appendChild(cell).className = "square";
  }
}

// 初始化
makeRows(32, 32);
rangeValue.textContent = "32x32";

// 滑块事件监听
range.addEventListener("input", function() {
  const size = parseInt(this.value);
  rangeValue.textContent = `${size}x${size}`;
  makeRows(size, size);
});

修改后拖动滑块时，网格会随滑块值动态更新，旧网格会被自动清除，不会出现叠加问题。

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