0

Necesito crear 4 articles mediante una función que los cree dentro de un section destino (display: grid) al cargar la página. Se trata de un desafío de la formación y no se me ocurre como. La función se ejecuta al ponerla en el body, pero, obviamente destruye toda la página dejando solo los artículos generados. Y el desafio consiste en que se mantenga la página web. Como nos encontramos en el módulo de evaluación de errores y tras llevar horas dándole vueltas no se si es posible o simplemente el maestro se está quedando con nosotros proponiendo un imposible.

Código HTML:

<section class="practice grid4-25">
<article onload="articulosDinamicos()"></article>
</section>

La función está metida en su correspondiente .js y funciona perfectamente, solo, que solo al colocarla en el body con onload o addEventListener. La section debería mantenerse ya que es una grid de 4 ya preparada para coger los artículos. El artículo del ejemplo puede desaparecer sin problemas.

Función JavaScript

function articulosDinamicos() {
    for (let i=0; i < 4; i++) {
        document.write('<article class="article-errores-javascript1"><h7 class="text-center margenb10">Artículo ' + (i+1) + '</h7><img src="assets/images/errores_javascript1-article.jpg"><div>Artículo creado de manera automática en la carga de la web.</div></article>');
    }

¡Muchísimas gracias por adelantado!

1 respuesta 1

0

Observando el problema que tienes es porque el evento onload se ejecuta en algunos elementos del DOM, por ejemplo en el body o en imagenes, lo que tienes que hacer es colocar el evento en la etiqueta body de esta manera:

function articulosDinamicos() {
  for (let i = 0; i < 4; i++) {
    document.write('<article class="article-errores-javascript1"><h7 class="text-center margenb10">Artículo ' + (i + 1) + '</h7><img src="assets/images/errores_javascript1-article.jpg"><div>Artículo creado de manera automática en la carga de la web.</div></article><br>');
  }
}
<!doctype html>
<html>

<head>
  <meta charset="utf-8" />
  <title>Título de la página</title>
</head>

<body onload="articulosDinamicos()">
  <section class="practice grid4-25">
  </section>
</body>

</html>

Entendido esto, no es la manera, ni la mejor practica mezclar código HTML y JS, para esto te dejo este ejemplo que a mi parecer es mejor:

//FUNCION QUE DETECTA LA CARGA COMPLETA DEL DOM
document.addEventListener('DOMContentLoaded', function() {
  //SE LLAMA A LA FUNCION QUE CREA LOS ARTICULOS
  articulosDinamicos()
});

function articulosDinamicos() {
  //OBTENEMOS EL CONTENEDOR DONDE SE PINTARAN LOS ARTICULOS MEDIANTE SU ID
  var section = document.getElementById('section');
  for (let i = 0; i < 4; i++) {
    var articles = '<article class="article-errores-javascript1"><h7 class="text-center margenb10">Artículo ' + (i + 1) + '</h7><img src="assets/images/errores_javascript1-article.jpg"><div>Artículo creado de manera automática en la carga de la web.</div></article><br>'
    //ESCRIBE LOS ARTICULOS EN EL ELEMENTO DEL DOM INDICADO
    section.innerHTML += articles;
  }
}
<!doctype html>
<html>

<head>
  <meta charset="utf-8" />
  <title>Título de la página</title>
</head>

<body>
  <section id="section" class="practice grid4-25">
  </section>
</body>

</html>

Ahora si forzosamente tienes que utilizar el evento onload podrías hacerlo de la siguiente manera, donde el evento se detecta desde tu JS:

window.onload = function articulosDinamicos() {
  //OBTENEMOS EL ELEMENTO MEDIANTE SU ID
  var section = document.getElementById("section");
  for (let i = 0; i < 4; i++) {
    //ESCRIBE LOS ARTICULOS EN EL ELEMENTO DEL DOM INDICADO
    section.innerHTML +=
      '<article class="article-errores-javascript1"><h7 class="text-center margenb10">Artículo ' +
      (i + 1) +
      '</h7><img src="assets/images/errores_javascript1-article.jpg"><div>Artículo creado de manera automática en la carga de la web.</div></article><br>';
  }
};
<!doctype html>
<html>

<head>
  <meta charset="utf-8" />
  <title>Título de la página</title>
</head>

<body>
  <section id="section" class="practice grid4-25">
  </section>
</body>

</html>

Dime si te funciono, te dejo este link para que entiendas mejor como funciona el evento.

2
  • 1
    Simplemente sensacional. ¡Funcionó a la primera! La verdad es que el ejercicio es un tanto raro, puesto que lo mas normal es colocar un "onload" en el body. Hoy empezamos la última unidad formativa: evaluación de errores. Me imagino que el profesor nos quiere hacer ver errores y malas praxis. Me encantaría poder votarte, pero, me registré hoy y me pide llevar 15 días registrado para ello. Pero, en cuanto pase los 15 días busco la pregunta en mi perfil y te voto positivo. ¡Un fuerte abrazo desde Barcelona!
    – Lancelot
    Commented el 30 may. a las 23:44
  • Excelente, mucha suerte. Commented el 30 may. a las 23:54

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.