Estoy tratando de crear un hoverboard modificado a partir de un proyecto de Udemy. El original incluía un conjunto de 500 cuadrados generados a través de un archivo JavaScript donde se invocaba un bucle for para generarlos.

Lo que quiero hacer aquí es agregar una entrada y un botón para poder seleccionar la cantidad de cuadrados directamente desde la entrada (cualquier valor de 1 a 999 cuadrados) y generarlo a través de JS. Sin embargo, cuando hago clic en Aceptar, no sucede nada.

Este es el código del archivo JS a continuación:

 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)]; }

¿Qué debo probar? Estoy pensando que el detector de eventos del botón está definido incorrectamente, principalmente que la función ClickButton debería tener algo más en lugar de CUADRADOS, pero no estoy seguro de qué debería usar en su lugar.