'How do I make my button clear content and create a new grid?

Please guys, I'm working on etch-a sketch project on TOP and I'm stuck on the section where I have to create a button which will clear the current grid and send the user a popup asking for the number of squares per side for the new grid.This is my code below. I need help on how to make the button function properly. Thank you

const container = document.getElementById('container');
    let rows = document.getElementsByClassName('gridRow');
    let cells = document.getElementsByClassName('cell');
        
defaultGrid();

//creates a default grid sized 16x16
function defaultGrid() {
    makeRows(16);
    makeColums(16);
}

function makeRows(rowNum) {
    for(let r = 0; r < rowNum; r++) {
        let row = document.createElement('div');
        container.appendChild(row).className = "gridRow";
    }
}

// creates columns
function makeColums(cellNum) {
    for (i = 0; i < rows.length;i++) {
        for (j = 0; j < cellNum; j++) {
            let newCell = document.createElement("div");
            rows[j].appendChild(newCell).className = "cell";
        }
    }
}
for(let i= 0; i < rows.length; i++) {
    rows[i].addEventListener('mouseover', e => e.target.classList.add('hoverColor'))
}
for(let i= 0; i < rows.length; i++) {
    rows[i].addEventListener('mouseout', e => e.target.classList.add('hoverColor3'))
}

for(let i= 0; i < cells.length; i++) {
    cells[i].addEventListener('mouseover', e => e.target.classList.add('hoverColor2'))
}
for(let i= 0; i < cells.length; i++) {
    cells[i].addEventListener('mouseout', e => e.target.classList.add('hoverColor3'))
}
const button = document.getElementById('Btn');
button.addEventListener('click', getNewGrid);
button.addEventListener('click', theNewGrid);
    
function getNewGrid() {
    for(let i= 0; i < cells.length; i++) {
        cells[i].remove();
    }
    for(let i= 0; i < rows.length; i++) {
        rows[i].remove();
    }
}

function theNewGrid(){
       let number= prompt("How many squares per side for the new grid?" );
       for(number=0; number<=100; number++) {
       }
       getNewGrid();
};

.gridRow {
    border: 1px solid black;
    min-width: 20px;
    min-height: 20px;
    display: inline-block;
    margin-right: 2px;
}
.cell {
    border: 1px solid black;
    min-width: 20px;
    min-height: 20px;
    display: inline-block;
    margin-right: 2px;
}
.hoverColor {
    background-color: pink
}
.hoverColor2 {
    background-color: blueviolet;
}

.hoverColor3 {
    background-color: white;
    transition:3s;
}
#Btn {
    margin-bottom: 50px;
    margin-top: 20px;
}

<!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>
    <link rel="stylesheet" href= "etch.css">
</head>
<body>

    <button id = "Btn">New Grid</button>
    <div id = 'container'></div>

</body>
</html>

javascript

Solution 1:^[1]

i tried to edit your post first because the indentation was making it hard to read. the edit has to be approved by the community so i'm pasting my edits below, but this time i'm adding comments and potentially the solution:

const container = document.getElementById('container');
let rows = document.getElementsByClassName('gridRow');
let cells = document.getElementsByClassName('cell');
        
createGrid();

//creates a grid sized 16x16 by default
function createGrid(size = 16) {
    makeRows(size);
}

function makeRows(size) {
    for(let r = 0; r < size; r++) {
        let row = document.createElement('div');
        container.appendChild(row).className = "gridRow";
        row.addEventListener('mouseover', e => e.target.classList.add('hoverColor'));
        row.addEventListener('mouseout', e => e.target.classList.add('hoverColor3'))
        makeColumns(row, size);
    }
}

// creates columns
function makeColumns(row, cellNum) {
    for (j = 0; j < cellNum; j++) {
        let newCell = document.createElement("div");
        newCell.addEventListener('mouseover', e => e.target.classList.add('hoverColor2'));
        newCell.addEventListener('mouseout', e => e.target.classList.add('hoverColor3'));
        row.appendChild(newCell).className = "cell";
    }
}

const button = document.getElementById('Btn');
// button.addEventListener('click', getNewGrid); // not here
button.addEventListener('click', theNewGrid);
    
function getNewGrid() {
    container.innerText = ''; // clear everything
}

function theNewGrid(){
       getNewGrid();
       let number = prompt("How many squares per side for the new grid?" );
       // below for loop does nothing
       // for(number=0; number<=100; number++) {
       // }
       createGrid(number); // pass the number as an argument
};

.gridRow {
    min-width: 20px;
    min-height: 20px;
    margin-right: 2px;
}
.cell {
    border: 1px solid black;
    min-width: 20px;
    min-height: 20px;
    display: inline-block;
    margin-right: 2px;
}
.hoverColor {
    background-color: pink
}
.hoverColor2 {
    background-color: blueviolet;
}

.hoverColor3 {
    background-color: white;
    transition:3s;
}
#Btn {
    margin-bottom: 50px;
    margin-top: 20px;
}

<!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>
    <link rel="stylesheet" href= "etch.css">
</head>
<body>

    <button id="Btn">New Grid</button>
    <div id="container"></div>

</body>
</html>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1

'How do I make my button clear content and create a new grid?

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]