JavaScript实现Etch-a-Sketch网格尺寸调整问题求助

问题概述 #

已完成The Odin Project的Etch-a-Sketch项目基础功能：创建16x16网格div、点击按钮弹出输入框，但无法将用户输入值（如50）应用为新的网格尺寸（50x50）。

当前代码 #

JavaScript #

const btn = document.querySelector("button");

btn.addEventListener("click", function () {
  var userInput = prompt(
    "Please enter the amount of grids you want to be in our Etch-a-Sketch. It needs to be between 1 and 100."
  );
  console.log(userInput);

  if (userInput > 0 && userInput < 101) {
    console.log("We are going to make a grid of " + userInput + " divs");
  } else {
    console.log(
      "You chose " +
        userInput +
        " and unfortunately that is too big. Please enter a value between 1 and 100."
    );
  }

  for (i = 0; i < userInput * userInput; i++) {
    let gridDiv = document.createElement("div");
    gridDiv.className = "gridDiv";
    document.getElementById("container").appendChild(gridDiv);
  }

  document.querySelectorAll(".gridDiv").forEach((v) => {
    v.addEventListener("mouseover", (e) => {
       e.target.style.background = "black";
    });
  });
});

CSS #

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

#btn {
    display: block;
}

.gridDiv {
    background-color: grey;
}

#container {
    height: 500px;
    width: 500px;
    border: 5px solid black;
    display: inline-grid;
    gap: 1px 1px;
    grid-template-columns: repeat(16, auto);
    /*grid-template-rows: repeat(auto);*/    
}

HTML #

<!DOCTYPE html>
<html lang = "en">
    <head>
        <meta charset = "UTF-8"/>
        <title>The Official Odin Project Etch a Sketch</title>
        <link rel="stylesheet" href="style.css"/>
        <script src = "script.js"  defer></script>
    </head>
    <header></header>
    <body>

        <div id="btnDiv">
            <button id = "btn">Click Me</button>
        
        </div>
        
    <div id = "container">
    </div>
    
    </body>
</html>

尝试过的方法 #

document.getElementById('container').style.gridTemplateColumns = "uerInput , auto";

该代码无效，不确定是语法还是逻辑问题。

提示方向 #

• 清理旧网格：每次生成新网格前，先清空容器内所有原有.gridDiv元素，避免新旧网格叠加导致布局混乱。
• 修正网格属性赋值：grid-template-columns需要使用repeat()函数，正确格式应为repeat(用户输入值, 1fr)（用1fr替代auto能让网格项均匀分配容器空间），同时注意变量名拼写（你之前写的uerInput是错误的）。
• 转换输入类型：prompt返回的是字符串，需转为数字后再进行大小判断和计算，避免非预期的比较结果。
• 限定有效操作范围：仅当用户输入符合1-100的条件时，才执行创建新网格和修改布局的操作，避免无效输入触发错误。

内容的提问来源于stack exchange，提问作者Servik-code