Resizing grids with JavaScript-CodePudding

I have been stuck on this problem for quite some time. I am just looking to get some hints or get pointed in the right direction, as I am trying my absolute hardest to work through this problem.

Introduction: I am working through The Odin Project - Etch-a-Sketch. In this problem I am to create a 16x16 grid, using JavaScript to create the divs that make up that grid. Then I create a button that has a prompt appear and the user input becomes the new size of the grid. For example, if the user input is "50" the grid goes from 16x16 to 50x50. All of these steps have been completed up until getting the user's input.

The problem: I have no idea how to take the value from my user input, and make it change my grid size.

Here is my 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>

Here is my 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);*/    
}

Here is my 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";
});

I am unsure if I have the grid coded in CSS incorreclty or if there is something in JavaScript that I would need to add that will change my grids. I know there are 100s of walkhroughs through the entire project, but I am just really trying to work through it myself and make my code work, not someone elses. Any help would be greatly appreciated, thanks!

I have tried

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

It did not work but I am unsure of if the issue is syntax or something else entirely.

CodePudding user response：

You were almost there! "userInput , auto" is being applied to your CSS property literally, so the value ends up being the string "userInput" is not the number that the user intended to put in.

You probably want to use the repeat() function like this:

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