How to replace a loop for a loop?

I have a grid made with a preset value that I’d like to have a function that replaces it with a grid who’s cells are generated with dynamic values gotten from a prompt input. The code for both grids work independently if I were to remove the other’s code, but for whatever reason I can’t get the 2nd grid to replace the first one when it gets it’s value.

Here is an example of my JS code that has the .replaceWith() method attempting to replace the cells of the original grid via div. I’m stumped.

    const board = document.getElementById("container");
    let button = document.getElementById("select");
    button.style.display = "flex";
    button.style.justifyContent = "center";
    board.style.justifyContent = "center";
    const cell = document.createElement('div');
        for (x=1; x <= 16; x++) {
            const cell = document.createElement('div')
            cell.className = "cells";
            cell.setAttribute("style", "height: 200px; width: 200px; color: black;");
            cell.style.backgroundColor = "blue";
            cell.style.border = "solid 2px";
            cell.style.borderColor = "black";
            board.style.columnGap = "0px";
            board.style.display ="grid";
            board.style.gridTemplateColumns = "200px 200px 200px 200px";
            board.appendChild(cell);
            cell.addEventListener("mouseover", change = () => 
            cell.style.backgroundColor = "red")
            cell.addEventListener("mouseout", reset = () => cell.style.backgroundColor = "blue") 
            };
            
    function setBoard () {
        let a = prompt("Select a the number of cells for the grid")
        if (a != null) {
            document.getElementById("container").value = a
        }
    for (x=1; x <= a; x++) {
        const nCell = document.createElement('div')
            nCell.className = "cells";
            nCell.setAttribute("style", "height: 200px; width: 200px; color: black;");
            nCell.style.backgroundColor = "blue";
            nCell.style.border = "solid 2px";
            nCell.style.borderColor = "black";
            board.style.columnGap = "0px";
            board.style.display ="grid";
            board.style.gridTemplateColumns = "200px 200px 200px 200px";
            board.appendChild(nCell);
            nCell.addEventListener("mouseover", change = () => 
            nCell.style.backgroundColor = "red")
            nCell.addEventListener("mouseout", reset = () => nCell.style.backgroundColor = "blue");
            cell.replaceWith(nCell);
    }
        
    }

    <!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">
        <link rel="stylesheet" href="styles.css">
        <title>Etch N Sketch</title>
    </head>
    <body>
    <div id="select">
        <button id="select" onclick="setBoard()">Set the number of squares</button>
    </div> 
    <div class="container" id="container">
    </div>
    <script src="script.js">
    </script>
    </body>
    </html>

Answer

As mentioned by @Bergi try using board.replaceChildren() to empty the board first first, and then refill the board like you do in the initial loop.

The cell.replaceWith does not do anything meaningful and can be removed. cell in this scope is the one you create in line 6 of your script, which you never append to the body or do anything else with.

Advertisement

Answer