Estoy tratando de activar una función llamada NewSquaresInGrid que elimina una cuadrícula de contenedor existente y agrega una nueva cuadrícula de contenedor que contiene una cantidad X de divs. La X procedente de un indicador.
El antiguo contenedor de cuadrícula se está eliminando y se está agregando una nueva cuadrícula, ¡pero los contenidos creados a través del bucle no aparecen!
¿Alguna idea de por qué no funciona?
Código en cuestión:
//Function to be called on button click removing existing grid and replacing with a new one function refreshGrid() { newSquares = prompt("How many squares would you like? (Maximum 100)"); removeGrid() let grid = document.createElement('div'); grid.classList.add('grid'); container.appendChild(grid); NewSquaresInGrid(); } function removeGrid() { container.removeChild(grid); } //Add a new grid function NewSquaresInGrid() { for (i = 0; i < newSquares; ++i) { let i = document.createElement('div'); i.classList.add('grid-item'); grid.appendChild(i); } }Código completo en: https://jsfiddle.net/ahq6830j/1/
Eso es porque let grid = document.createElement('div'); crea una nueva variable de grid local para la función. Entonces, las otras funciones que intentan reutilizar la variable de grid no tendrán acceso a ella.
elimine let y use grid = document.createElement('div'); para actualizar la variable de grid global ya existente.
Pero vuelves a visitar la parte donde reutilizas la variable i dentro de los bucles.
las variables declaradas con let en javascript tienen un alcance de bloque, lo que básicamente significa que la variable de grid declarada en la función refreshGrid() no es accesible fuera de la función. Una opción es declarar globalmente la variable de cuadrícula de esta manera:
let grid; También debe cambiar el nombre de i en el contador de bucle a otra cosa para que no entre en conflicto con la otra variable i dentro del bucle.