Question

hola chicos tengo una lista de imagenes me gustaria poder cargar cada una dinamicamente, es decir que cada imagen se cargue despues de algunos segundos hasta que se carguen todas las imagenes
practicamente se deberia de crear el elemento imagen y llevar la primera imagen de mi lista, luego despues de algunos segundos se deberia de crear otro elemento y llevar el siguiente elemento de mi lista, esto se debe detener cuando llege al ultimo elemento para no crear un bucle infinito

<button onclick="listar()">listar todas las imagenes</button>
<div id="seccion"></div>

<script type="text/javascript">
var files =['enero.jpg', 'febrero.jpg', 'marzo.jpg', 'abril.jpg', 'mayo.jpg'];
function listar(){
    contador = 0;
    contenedor = document.getElementById('seccion');
    imagenes = document.createElement('img')
    loop = setInterval(function(){
        contador = contador + 1;
        contenedor.appendChild('imagenes');
        rutaImagen = imagenes.setAttribute('src', 'clothes/'+files[contador]);
        rutaImagen.height= 100;

    }, 5000);
}

output

orden.html:36 Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.

Answer 1

Hola @steven,

tenés otra vez un problema de sintaxis. El método appendChild() tiene que recibir cómo parámetro una variable (que contiene la salida del createElement() ) y no un string como estás haciendo.

En Javascript y en la mayoría de los lenguajes de programación 'imagenes' o imagenes son cosas distintas.

Luego, si tu elemento creado está en la variable imagenes, el height también aplicáselo a esa variable y no a rutaImagen.

Saludos cordiales.