Page slows browser down when input is high

Question

I am building an etch-a-sketch browser version for the odin project. There is a prompt message that asks input from the user and creates a grid based on the input.

If the input is 15 that should give a 15x15 grid.

Unfortunately the higher the input the more time it takes for the page to load. Any ideas why?

const container = document.querySelector('#container');
const btn = document.querySelector('#btn');
/*
btn.addEventListener('click', () => {
  squares.forEach(square => {
    square.style.backgroundColor = 'white';
  });
});
*/
btn.addEventListener('click', () => addGrid());

function addGrid() {

  let content = document.createElement('div');
  let input = prompt("Please enter the number of squares per side (2 - 100)");

  while ((input == null || input > 100 || input < 2 || isNaN(input))) {
    input = prompt("Please enter the number of squares per side (2 - 100)");
  }

  for (let i = 0; i <= input * input; i++) {

    container.style.cssText = 'grid-template-rows: repeat(' + input + ' , 1fr); grid-template-columns: repeat(' + input + ', 1fr)';
    content = document.createElement('div');
    content.classList.add('square');
    container.appendChild(content);
    squares = container.querySelectorAll('.square')

    squares.forEach(square => {
      square.addEventListener('mouseenter', () => {
        square.style.backgroundColor = 'black';
      });
    });

    squares.forEach(square => {
      square.addEventListener('mouseleave', () => {
        square.style.backgroundColor = 'black';
      });
    });

  }
  return content;
}

<button id="btn">Click</button>
<div id="container"></div>

Answer 1

You need to move the event handlers outside the loop. Also you need to use < instead of <= in the loop

Even better, delegate from container

Here is a working version - you could use calc() in the css to size the individual squares

Using delegated event handling

const container = document.getElementById('container');
const btn = document.getElementById('btn');
const reset = document.getElementById('reset');

const mclick = e => { 
  const tgt = e.target;
  if (tgt.matches(".square")) tgt.classList.toggle("clicked");
}
const mhover = e => {
  const tgt = e.target;  
  if (!tgt.matches(".square")) return; // not a square
  tgt.classList.toggle("active",e.type==="mouseover")
}

const resetGrid = () => container.querySelectorAll(".square")
  .forEach(sq => { 
    ["clicked","active"]
    .forEach(cls => sq.classList.remove(cls))
    });

const addGrid = () => {

  let content = document.createElement('div');
  let input = prompt("Please enter the number of squares per side (2 - 100)");

  while ((input == null || input > 100 || input < 2 || isNaN(input))) {
    input = prompt("Please enter the number of squares per side (2 - 100)");
  }

  for (let i = 0; i < input * input; i++) {

    container.style.cssText = 'grid-template-rows: repeat(' + input + ' , 1fr); grid-template-columns: repeat(' + input + ', 1fr)';
    let content = document.createElement('div');
    content.classList.add('square');
    content.textContent = i
    container.appendChild(content);
  }
};
btn.addEventListener('click',addGrid);

container.addEventListener("mouseover",mhover);
container.addEventListener("mouseout",mhover);
container.addEventListener("click",mclick);
reset.addEventListener("click",resetGrid);

#container { display:grid; }
div.square { height: 50px; width: 50px; border:1px solid black;}
div.square.active { background-color: black;}
div.square.clicked { background-color: red;}

<button id="btn">Start</button><button id="reset">Reset</button>
<div id="container"></div>