Escribí una función Etch-a-Sketch a través de un bucle for y traté de darle vida con un botón "borrar" para borrar los divs y un botón "nuevo" para elegir una nueva cuadrícula. La función clear() solo funciona la primera vez. Desde la segunda entrada en la parte inferior, los divs permanecen negros si elige una cuadrícula más grande, lo que da como resultado que se muestren los divs negros "antiguos" en la nueva cuadrícula. Creo que la función clear() tiene que implementarse de alguna manera en la función makeGrid(), para borrar la cuadrícula actual, pero ¿cómo implemento eso en eventListener? Espero que puedas entender lo que quiero decir, no hay hablante nativo aquí. aquí está el código, primero HTML y luego Javascript.
<body> <h2>Etch-a-sketch</h2> <div class="btn-container"> <button type="button" id="btn">clear</button> <button type="button" id="new">New</button> </div> <div class ="container" id="container"> </div> </body> document.addEventListener('DOMContentLoaded', () => { function makeGrid(num) { for(let i = 0;i < (num * num); i++) { const div = document.createElement('div'); container.style.gridTemplateColumns = `repeat(${num}, 1fr)`; container.style.gridTemplateRows = `repeat(${num}, 1fr)`; container.appendChild(div).classList.add('gridItems') div.addEventListener('mouseover', function(e){ e.target.style.backgroundColor = 'black'; }) } } function clear() { gridItems.forEach(item => { item.style.backgroundColor = 'pink'; }); } let num = 0; num = prompt('Pick a number between 1 and 100!'); if(num > 100){ prompt('to high!') }else{ makeGrid(num); } function ask() { let num = 0; num = prompt('Pick a number between 1 and 100!'); if(num > 100){ prompt('to high!') }else{ makeGrid(num); } } const button = document.getElementById('btn'); const newBtn = document.getElementById("new"); const gridItems = document.querySelectorAll('.gridItems'); newBtn.addEventListener('click', ask); button.addEventListener('click', clear); })¡Buen fin de semana y gracias!