使用 JavaScript 调整网格大小答案

【问题标题】：Resizing grids with JavaScript使用 JavaScript 调整网格大小
【发布时间】：2022-11-16 03:33:37
【问题描述】：

我已经在这个问题上停留了很长一段时间。我只是想获得一些提示或指出正确的方向，因为我正在尽最大努力解决这个问题。

简介：我正在研究 Odin 项目 - Etch-a-Sketch。在这个问题中，我将创建一个 16x16 的网格，使用 JavaScript 创建构成该网格的 div。然后我创建一个出现提示的按钮，用户输入成为网格的新大小。例如，如果用户输入是“50”，则网格从 16x16 变为 50x50。在获得用户输入之前，所有这些步骤都已完成。

问题：我不知道如何从我的用户输入中获取值，并让它改变我的网格大小。

这是我的 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>

这是我的 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);*/    
}

这是我的 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';
    });
    });

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

我不确定我是否用 CSS 编码的网格不正确，或者我是否需要在 JavaScript 中添加一些东西来改变我的网格。我知道整个项目有 100 多次演练，但我真的只是想自己完成它并使我的代码正常工作，而不是其他人。任何帮助将不胜感激，谢谢！

我努力了

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

它没有用，但我不确定问题是语法问题还是其他问题。

【问题讨论】：

请看How to Ask，然后修改你的帖子标题问清楚，具体的问题。

标签： javascript css dom css-grid

【解决方案1】：

你快到了！ "userInput , auto" 按字面意义应用于您的 CSS 属性，因此该值最终成为字符串“userInput”，而不是用户打算输入的数字。

您可能想像这样使用 repeat() 函数：

document.getElementById('container').style.gridTemplateColumns = `repeat(${userInput}, 1fr)`;

【讨论】：