请求帮助：实现点击按钮获取用户输入以调整x*x网格大小

核心步骤说明 #

• 给resizeButton添加点击事件，触发弹窗收集用户输入
• 验证输入有效性（确保是合理范围内的整数）
• 清空现有网格后，调用createGrid生成新尺寸网格
• 优化原函数的执行效率

修改后的完整代码 #

const div = document.querySelector('#container')
const clearButton = document.querySelector('.button-clear');
const resizeButton = document.querySelector('.button-resize')

// 生成网格函数
const createGrid = (gridNumber = 16) => { // 用默认参数简化逻辑
  // 仅设置一次网格模板，避免循环内重复执行
  div.style.gridTemplateRows = `repeat(${gridNumber}, 1fr)`;
  div.style.gridTemplateColumns = `repeat(${gridNumber}, 1fr)`;

  const gridSize = gridNumber * gridNumber;
  for (let i = 0; i < gridSize; i++) { // 给循环变量添加let声明，避免全局污染
    const squares = document.createElement('div');
    squares.classList.add('squares');
    div.appendChild(squares);
  }

  // 给网格方块添加鼠标变色事件
  const boxes = document.querySelectorAll('.squares');
  boxes.forEach(box => box.addEventListener('mouseover', () => {
    box.style.backgroundColor = "gray";
  }));
}

// 重置网格颜色函数
const resetGrid = () => {
  const boxes = document.querySelectorAll('.squares');
  boxes.forEach(box => {
    box.style.backgroundColor = 'white';
  })
}

// 清空现有网格的辅助函数
const clearGrid = () => {
  div.innerHTML = ''; // 直接清空容器内容，简单高效
}

// 处理尺寸调整的函数
const handleResize = () => {
  const userInput = prompt('请输入网格的边长（建议1-100之间的整数）');
  const gridNumber = parseInt(userInput);
  // 验证输入是否为有效整数
  if (!isNaN(gridNumber) && gridNumber > 0 && gridNumber <= 100 && Number.isInteger(gridNumber)) {
    clearGrid(); // 先清空旧网格
    createGrid(gridNumber); // 生成新网格
  } else {
    alert('请输入有效的数字（1-100之间的整数）');
  }
}

// 初始化默认16x16网格
createGrid();

// 绑定按钮事件
clearButton.addEventListener('click', resetGrid);
resizeButton.addEventListener('click', handleResize); // 绑定尺寸调整按钮事件

关键修改点解释 #

1. 函数声明规范：给所有函数添加const声明，避免全局变量污染
2. 简化默认值逻辑：用ES6默认参数替代原有的if判断，代码更简洁
3. 优化网格模板设置：将网格行列设置移到循环外，减少不必要的重复执行
4. 新增清空网格函数：快速清除旧网格，避免新旧网格叠加
5. 输入有效性验证：过滤无效输入，防止非数字或过大数值导致的异常
6. 绑定调整按钮事件：完成点击弹窗、输入验证、网格重建的完整流程

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