调整Etch-a-Sketch网格尺寸出现布局偏移问题求助（TOP项目）

问题描述 #

完成The Odin Project的Etch-a-Sketch项目时，默认16x16网格可正常工作，但使用setSize函数调整尺寸（尤其是大于16x16）时，容器内所有div向上偏移，布局混乱。

问题根源 #

1. 变量误用：setSize函数中设置网格行列时，错误使用代表按钮元素的size变量，而非用户输入的x值，导致网格模板设置无效。
2. 未清空旧单元格：创建新网格前未移除容器内已存在的旧单元格，新旧单元格叠加导致网格布局计算错误，引发偏移。
3. 重复事件绑定：每次创建单元格都给按钮绑定事件，导致事件监听重复触发，虽不直接影响布局，但会造成性能冗余。

修复方案 #

1. 修正变量错误：移除setSize中多余的网格模板设置代码（createGrid函数内已处理），确保用用户输入的x值调用createGrid。
2. 清空旧网格：在createGrid函数开头添加代码，清空容器内所有子元素。
3. 优化事件监听：将按钮事件监听移到createGrid外部，通过状态变量控制画笔颜色/擦除功能，避免重复绑定。

修正后的代码 #

HTML（无需修改） #

<!DOCTYPE html>
<html lang="en">
<head>
    
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ETCH-A-SKETCH</title>
</head>
<body>

<h1>Etch-a-Sketch</h1>

 <div class="content">
    <div class="buttonCon">
        <div class="buttons">
         <button id="eraser">Eraser</button>
         <button id="reset">Reset</button>
         <button id="setSize">Set Size</button>
         <button id="pink">Pink</button>
        </div>
       </div>
    <div class="container">
    </div>
    
 </div>
 <div class="footer">
    ❤️ BigSlyphhh ❤️
  </div>
    <link rel="stylesheet" href="style.css">
    <script src="java.js"></script>
</body>
</html>

JavaScript #

const container = document.querySelector(".container");
const eraser = document.getElementById("eraser");
const sizeBtn = document.getElementById("setSize");
const pinkBtn = document.getElementById("pink");
const reset = document.getElementById("reset");

// 状态变量控制当前画笔颜色
let currentColor = "pink";

function createGrid(size){
  // 清空容器内旧单元格
  container.innerHTML = "";
  
  container.style.gridTemplateRows = `repeat(${size}, 1fr)`;
  container.style.gridTemplateColumns = `repeat(${size}, 1fr)`;

  for (let i = 0 ; i < (size*size); i++) {
    let cell = document.createElement("div");
    cell.style.backgroundColor = "white";
    cell.style.border = "white solid 0.1px";
    container.appendChild(cell);

    // 统一的mouseover事件，根据当前状态设置颜色
    cell.addEventListener('mouseover', e => {
      cell.style.backgroundColor = currentColor;
    })
  }
}

// 重置网格颜色
function resetGrid(){
  const cells = container.querySelectorAll("div");
  cells.forEach(cell => {
    cell.style.backgroundColor = "white";
  })
}

// 按钮事件监听移到外部，避免重复绑定
eraser.addEventListener('click', e => {
  currentColor = "white";
})

pinkBtn.addEventListener('click', e => {
  currentColor = "pink";
})

reset.addEventListener('click', resetGrid)

function setSize () {
  let x = prompt("What size grid? (Up to 100)");
  // 转换为数字，避免字符串比较问题
  x = parseInt(x);
  if (isNaN(x) || x < 1 || x > 100){
    alert("Must be a number between 1 and 100")
  } 
  else {
    createGrid(x)
  }
}

sizeBtn.addEventListener('click', setSize)

// 初始化网格
createGrid(16)

CSS（无需修改） #

html {
  background-color: rgb(248, 222, 226);
}
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: CerebriSans-Regular,-apple-system,system-ui,Roboto,sans-serif;
  
}

.content {
  display: flex;
  align-items: center;
  justify-content: center;
}

.container {
  width: 700px;
  height: 700px;
  display: grid;
  margin: 10px;
  border: 4px solid rgb(244, 215, 215);
  border-radius: 5px;
}


h1 {
  text-align: center;
  font-weight: 900;
  color: white;
  font-size: 55px;
  text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
}
  

.buttonCon {
  width: 200px;
  height: 90px;
  padding: 10px;
  margin: 5px;
  background-color: white;
  border:4px rgb(244, 215, 215) solid;
}

.footer {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* CSS for button design from cssscan, edited to suit color-scheme*/
button {
  background-color: pink;
  border-radius: 100px;
  box-shadow: rgba(252, 196, 246, 0.657) 0 -25px 18px -14px inset,rgba(245, 202, 237, 0.948) 0 1px 2px,rgb(238, 185, 234) 0 2px 4px,rgb(255, 185, 235) 0 4px 8px,rgba(241, 192, 230, 0.484) 0 8px 16px,rgb(255, 220, 254) 0 16px 32px;
  color: white;
  cursor: pointer;
  display: inline-block;
  font-family: CerebriSans-Regular,-apple-system,system-ui,Roboto,sans-serif;
  padding: 3px 20px;
  text-align: center;
  text-decoration: none;
  transition: all 250ms;
  border: 0;
  font-size: 16px;
  margin: 6px;
  
}

button:hover {
  box-shadow: rgb(238, 173, 230) 0 -25px 18px -14px inset,rgba(248, 186, 237, 0.948) 0 1px 2px,rgb(255, 177, 250) 0 2px 4px,rgb(244, 171, 223) 0 4px 8px,rgb(203, 163, 194) 0 8px 16px,rgb(242, 202, 241) 0 16px 32px;
  transform: scale(1.05) rotate(-1deg);
}

.footer {
  color: white;
}

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