Console error saying variable not defined, even though defined in same function

Question

I have a variable called grid which contains variables called elements.

On click of a button I'd like to remove the grid and replace it with a fresh one. This is done via an event listener, a function and an if statement.

However I'm getting a console error telling me "grid is not defined".

Can anyone help?

//Create preset variables
let body = document.querySelector('body');
let content = document.querySelector('.content');
let numberOfSquares = 16;
let randomColorValue = '';
let colorShade = 10;
let buttonClicks = 0;
/* let grid = document.createElement('div'); */

//Create variable called container that contains a div
let container = document.createElement('div');
container.classList.add('container');
body.appendChild(container);

// Add a button &  position to top of screen
let button = document.createElement('button');
button.textContent = "Refresh!";
button.classList.add('refresh-button');
content.appendChild(button);
button.addEventListener('click', refreshGrid);

squaresInGrid();

function squaresInGrid() {
    if (buttonClicks > 0) {
        console.log(buttonClicks);
        container.removeChild(grid);
    }

    for (i = 0; i < numberOfSquares; ++i) {
        let grid = document.createElement('div');
        grid.classList.add('grid');
        container.appendChild(grid);

         let element = document.createElement('div');
         element.classList.add('grid-item');
         element.addEventListener('mouseenter', function mouseEnterFunctions() {
             randomColor();
             hoverStyle();
            --colorShade;
            element.removeEventListener('mouseenter', mouseEnterFunctions);
         });

        function hoverStyle() {
            element.style.backgroundColor = '#'+randomColorValue;
            element.style.opacity = (colorShade / 10); 
        }

        function randomColor() {
            randomColorValue = Math.floor(Math.random()*16777215).toString(16);
        }

        grid.appendChild(element);                
    }
} 

//Function to be called on button click removing existing grid and replacing with a new one
function refreshGrid() {
    ++buttonClicks;
    numberOfSquares = prompt("How many squares would you like? (Maximum 100)");
    colorShade = 0;
    squaresInGrid();
}

Answer 1

You defined your grid variable in the for loop, so it's not accessible anywhere but inside the loop.

You should instead uncomment your line at the top of your code to make it a global variable. Then in the for loop, remove the let keyword in front of your variable for grid so that it always references the outer variable.