Comenzaré diciendo, solo porque pienso que es muy importante ser correctos en el uso del lenguaje, que en el DOM no puedes pintar nada. El DOM es un Modelo que está en memoria y representa la estructura del documento HTML.
Tu, lo que quieres, es agregar elementos al DOM para que el navegador los pinte en la pantalla del dispositivo del usuario.
Dicho esto, pienso que tu código está casi listo para funcionar. En mi navegador, se pintan los SEIS (que no 5) cuadrados que genera tu código, cada segundo.
Supongo que en cada ejecución quieres limpiar los cuadrados de la iteración anterior, pero para llamar al método removeChild()
hace falta tener o encontrar referencias a los cuadrados a eliminar. En el código siguiente me estoy valiendo del método qrySelectorAll()
para encontrar todos los divs y luego, iterando por la lista devuelta, los voy eliminando uno a uno.
La llamada a removeChild()
sin parámetros lanza una excepción y allí se detiene la ejecución de tu código, probablemente por eso ves solo un cuadrado (que quizás está en tu HTML original o sea la línea que tienes comentada en el javascript que publicas.
Luego, dejo correr tu código, sin modificaciones. Lo dejé en un snippet, para que puedas probarlo aquí mismo dándole clic en el botón Ejecutar más abajo:
var Cronometro;
function Generador () {
document.querySelectorAll("div").forEach((element) => {
document.body.removeChild (element);
});
var PosicionHorizontal;
var PosicionVertical;
for (let i = 0; i <= 5; i++) {
var Cuadrado = document.createElement ("div");
PosicionHorizontal = Math.floor (Math.random () * 500);
PosicionVertical = Math.floor (Math.random () * 180);
Cuadrado.style.width = "5px";
Cuadrado.style.height = "5px";
Cuadrado.style.background = "blue";
Cuadrado.style.position = "absolute";
Cuadrado.style.left = (PosicionHorizontal + "px");
Cuadrado.style.top = (PosicionVertical + "px");
document.body.appendChild (Cuadrado);
}
}
function Temporizador () {
Cronometro = setInterval (Generador, 1000);
}
Generador();
Temporizador ();
OJO: Cambié las constantes por las que multiplicas para obtener las coordenadas, solo para que los puntos se aprecien dentro de la propia respuesta sin barras de scroll e hice otro par de ajustes al código que creo que se auto-explican.
document.removeChild()
pordocument.body.innerHTML=""