I'm trying to create a modified hoverboard from an Udemy project. The original included a set of 500 squares generated via a JavaScript file where a for loop was called in order to generate them.

What I want to do here is add an input and a button in order to be able to select the number of squares directly from the input (any value from 1 to 999 squares), and generate it via JS. However, when I click OK nothing happens

This is the code from the JS file below:

const container = document.getElementById('container');
const colors = ['white', 'grey', 'rebeccapurple', 'steelblue', 'darkred', 'darkgreen', 'lightblue'];
const SQUARES = document.getElementById('input');
const button = document.getElementById('button');

button.addEventListener('click', () => clickButton(SQUARES));

function clickButton() {
    for (let i = 0; i < SQUARES; i++) {
      if (SQUARES < 1000) {
        const square = document.createElement('div');
        square.classList.add('square');
    
        square.addEventListener('mouseover', () => setColor(square));
        square.addEventListener('mouseout', () => removeColor(square));

        container.appendChild(square);
      }
      else {
        alert('The input is out of bounds.');
     }
   }
}

function setColor(element) {
   const color = getRandomColor();
   element.style.background = color;
   element.style.boxShadow = `0 0 2px ${color}, 0 0 10px ${color}`;
}

function removeColor(element) {
   element.style.background = '#1d1d1d';
   element.style.boxShadow = '0 0 2px #000';
}

function getRandomColor() {
   return colors[Math.floor(Math.random() * colors.length)];
}

What should I try? I'm thinking that the button event listener is incorrectly defined, mainly that the ClickButton function should have something else in place of SQUARES, but I'm not sure at all what I should use instead.