-2

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();
}
skyline3000
  • 7,639
  • 2
  • 24
  • 33
Sam Jefferies
  • 584
  • 1
  • 7
  • 27
  • Does the error tell you which line it happened on? – Hanchen Jiang Jan 02 '22 at 18:23
  • Can you elaborate as to how you expect `grid` to be defined in the scope of the `randomColor()` function...? – esqew Jan 02 '22 at 18:24
  • Thanks it say's "133:27 Uncaught ReferenceError: grid is not defined" I am using JSFiddle. https://jsfiddle.net/stcLg6dn/7/ @HanchenJiang – Sam Jefferies Jan 02 '22 at 18:29
  • @esqew I'm sorry I don't understand your question. I am new to coding. – Sam Jefferies Jan 02 '22 at 18:29
  • If you actually haven't commented the global `grid` out, then https://stackoverflow.com/questions/33198849/what-is-the-temporal-dead-zone , otherwise https://stackoverflow.com/questions/500431/what-is-the-scope-of-variables-in-javascript . It's also notable, that `appendChild` removes the element to append from its current location, even when it would be in a JS variable. – Teemu Jan 02 '22 at 18:41
  • 1
    You defined `grid` in the for loop, it's not accessible at the top of your `squaresInGrid` function in the `if ()` statement. – skyline3000 Jan 02 '22 at 18:58
  • Thanks @skyline3000 what would the solution be? If I change it from let grid = to grid = within the loop I get the same issue. – Sam Jefferies Jan 02 '22 at 20:09
  • Define it outside of the loop. When the loop resets to loop again, the defined variable would be deleted and then opened again. Defining `grid` next to the globals at the top will fix your issue. skyline3000 has a good idea but he didn't explain it thoroughly enough for you to understand that he is not asking to to JUST remove `let`, but also define it outside of the function. – Major_Flux- Jan 02 '22 at 20:50

1 Answers1

0

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.

skyline3000
  • 7,639
  • 2
  • 24
  • 33