如何在不使用CSS Grid的Etch a Sketch中增方块且保网格尺寸

问题根源 #

1. 网格被拉长：给每个方块设置了固定padding:20px，且用flex:1 1让方块自动伸缩，当数量变化时，总内边距会超出容器的640px限制，导致整体拉长。另外所有方块用同一个id="childDiv"不符合HTML规范（id必须唯一），应该用class。
2. resizeGrid无效：userInput是prompt返回的字符串，没有转成数字；循环变量i未声明导致全局变量冲突；且没有根据新的尺寸计算每个方块的实际大小。

修改步骤 #

1. 修正CSS（核心：让方块尺寸根据网格数量自动计算）

把#childDiv改成.grid-square，去掉固定padding，改用计算后的宽高，同时设置box-sizing避免边框干扰：

* {
    padding: 0;
    margin: 0;
    background-color: #1a759f;
    box-sizing: border-box; /* 新增：确保边框和内边距计入元素尺寸 */
}
#mainDiv {
    display: flex;
    justify-content: center;
    padding-top: 30px;
    padding-bottom: 30px;
    flex-direction: column-reverse;
    align-items: center;
}
#mainGrid {
    color: #d9ed92;
    display: flex;
    flex-wrap: wrap;
    width: 640px;
    height: 640px;
    background-color: #d9ed92;
    border: 1px solid white; /* 可选：给网格加边框 */
}
/* 把id改成class，去掉固定padding，后续用JS动态设置宽高 */
.grid-square {
    background-color: #d9ed92;
    border: 1px solid white;
    flex-shrink: 0; /* 禁止方块缩小，保证尺寸准确 */
}

#button, #clearBtn, #eraserBtn {
    background-color: black;
    border: solid;
    color: white;
    padding:  15px 32px;
    text-align: center;
    font-size: 16px;
    margin: 4px 2px;
    width: 132px;
}

2. 修正JavaScript（处理尺寸计算、输入验证和变量问题）

• 给方块用class代替重复id
• 新增计算方块尺寸的逻辑
• 修复userInput的类型转换和验证
• 声明循环变量避免全局污染

// Main container
function createDiv() {
  const mainDiv = document.createElement("div");
  document.body.appendChild(mainDiv);
  mainDiv.setAttribute("id","mainDiv");
}
createDiv();

let currentSize = 16; // 用let声明当前尺寸，方便后续修改
// Grid container
function createGrid() {
  const mainGrid = document.createElement("div");
  mainDiv.appendChild(mainGrid);
  mainGrid.setAttribute("id","mainGrid");
}
createGrid();

// 创建单个网格方块，接收尺寸参数设置宽高
function createChild(size) {
  const childDiv = document.createElement("div");
  mainGrid.appendChild(childDiv);
  childDiv.classList.add("grid-square"); // 用class代替重复id
  // 计算每个方块的尺寸：容器640px / 网格边长
  const squareSize = 640 / size + "px";
  childDiv.style.width = squareSize;
  childDiv.style.height = squareSize;
  
  childDiv.addEventListener(
    "mouseenter",
    (event) => {
      event.target.style.background = "black";
    }
  );
}

// 生成网格
function createLoop(size) {
  // 用let声明i，避免全局变量冲突
  for (let i = 0; i < size * size; i++) {
    createChild(size);
  }
}
createLoop(currentSize);

// 创建调整尺寸按钮
function createButton() {
  const button = document.createElement("button");
  mainDiv.appendChild(button);
  button.setAttribute("id","button");
  button.textContent = "Change grid size";

  button.addEventListener("click", () => {
    let userInput = prompt("Please insert desired size, between 1-100");
    // 转成数字并验证有效性
    userInput = parseInt(userInput);
    if (isNaN(userInput) || userInput < 1 || userInput > 100) {
      alert("Invalid value! Please enter a number between 1-100");
      return;
    }
    clearGrid();
    currentSize = userInput;
    resizeGrid(currentSize);
  });
}
createButton();

// 橡皮按钮（补充基础逻辑）
function createEraser() {
  const eraserBtn = document.createElement("button");
  mainDiv.appendChild(eraserBtn);
  eraserBtn.setAttribute("id","eraserBtn");
  eraserBtn.textContent = "Eraser";

  eraserBtn.addEventListener("click", () => {
    const squares = document.querySelectorAll(".grid-square");
    squares.forEach(square => {
      square.removeEventListener("mouseenter", ()=>{});
      square.addEventListener("mouseenter", (e) => {
        e.target.style.background = "#d9ed92";
      });
    });
  });
}
createEraser()

// 清除颜色按钮
function clearColor() {
  const clearBtn = document.createElement("button");
  mainDiv.appendChild(clearBtn);
  clearBtn.setAttribute("id","clearBtn");
  clearBtn.textContent = "Clear";

  clearBtn.addEventListener("click", () => {
    mainGrid.childNodes.forEach((child) => {
      child.style.backgroundColor = "#d9ed92";
    });
  });
}
clearColor();

// 清空网格
function clearGrid() {
  while(mainGrid.firstChild) {
    mainGrid.removeChild(mainGrid.firstChild);
  }
}

// 调整网格尺寸
function resizeGrid(size) {
  for (let i = 0; i < size * size; i++) {
    createChild(size);
  }
}

3. HTML无需修改，保持原样即可

关键说明 #

• 用flex-shrink:0确保方块不会被压缩，保证尺寸准确
• 每次生成网格时根据当前尺寸计算单个方块的宽高，确保总尺寸始终是640x640px
• 修复了变量声明和输入验证问题，确保resizeGrid函数正常工作
• 所有方块使用class代替重复id，符合HTML规范

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