1

Me gustaria dibujar en el DOM en lugares aleatorios 5 cuadrados, pero solamente se pinta uno y sin embargo, mediante el console.log, veo que se generan las 5 posiciones. Tengo el siguiente codigo:

var PosicionHorizontal;
var PosicionVertical;
//var Cuadrado = document.createElement ("div");

function Generador () {
    document.removeChild ()
    for (let i = 0; i <= 5; i++) {
        var Cuadrado = document.createElement ("div");
        PosicionHorizontal = Math.floor (Math.random () * 865);
        PosicionVertical = Math.floor (Math.random () * 325);
        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");
        console.log ("Horizontal", PosicionHorizontal);
        document.body.appendChild (Cuadrado);
    }
}

function Temporizador () {
    Cronometro = setInterval (Generador, 1000);
}

Temporizador ();
6
  • Lo siento, pero no se añadir el codigo de JavaScript.
    – Raul
    Commented el 6 jun. 2023 a las 10:01
  • Bienvenido a StackOverflow, te invito a hacer el recorrido de bienvenida. Por otro lado, tu pregunta no tiene código, te invito también a darle editar y agregarlo. No olvides que el código se agrega como texto, no vayas a dejar una imagen del código. Un saludo.
    – jachguate
    Commented el 6 jun. 2023 a las 10:03
  • Puedes usar uno de los botones que resalté en esta imagen para pegar el texto de tu código dentro de la pregunta. Si no lo logras, pega el texto simple dentro de ella, me dejas una mención con @jachguate y yo edito la pregunta para que tome formato. En el primero, el código debe estar ya en la pregunta, lo seleccionas y le das clic. En el segundo, puedes introducir HTML/CSS/JS para que se ejecute en un sandbox dentro de la propia pregunta. Te aparece un editor al hacer clic. Un saludo.
    – jachguate
    Commented el 6 jun. 2023 a las 10:10
  • Muchas gracias, he podido añadir el codigo, que antes no podia. Unicamente falta arriba definir la variable var Cronometro, pero no me lo ha cogido. Gracias.
    – Raul
    Commented el 6 jun. 2023 a las 10:31
  • A mi me funciona bien, solo he cambiado document.removeChild() por document.body.innerHTML=""
    – Yussef
    Commented el 6 jun. 2023 a las 10:51

1 respuesta 1

2

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.

1
  • Muchas gracias, es exactamente lo que queria hacer. Perfecto, muchas gracias de nuevo.
    – Raul
    Commented el 6 jun. 2023 a las 12:10

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.