No entiendo por qué esto no funciona? por favor dime lo que me perdí en este código ** html **
<div id="img"> <img class="images"src="images/boy1.jpg"> </div>** js **
var images = new Array(); images[0] = "/images/boy1.jpg"; images[1] = "/images/boy2.jpg"; images[2] = "/images/boy3.jpg"; images[3] = "/images/girl1.jpg"; images[4] = "/images/girl2.jpg"; function changeImg(){ let img = document.querySelector(".images"); for(let i=0;i<images.length;i++){ img.src = images[i] } } document.getElementById("btn").addEventListener("click",changeImg)intentalo:
var images = new Array(); images[0] = "/images/boy1.jpg"; images[1] = "/images/boy2.jpg"; images[2] = "/images/boy3.jpg"; images[3] = "/images/girl1.jpg"; images[4] = "/images/girl2.jpg"; function changeImg() { const imgBox = document.getElementById("img"); for (let i = 0; i < images.length; i++) { const img = document.createElement("img"); img.src = images[i] imgBox.appendChild(img) } } document.getElementById("btn").addEventListener("click", changeImg) <div id="img"></div> <button id="btn">Start</button>Su ciclo siempre toma la última imagen y la configura como la fuente de la etiqueta img, lo que debe hacer es cambiar el índice y luego solo configurar la imagen indexada como la fuente:
const image = document.querySelector(".images"); let currentIndex = 0; let images = new Array(); images[0] = "/images/boy1.jpg"; images[1] = "/images/boy2.jpg"; images[2] = "/images/boy3.jpg"; images[3] = "/images/girl1.jpg"; images[4] = "/images/girl2.jpg"; const length = images.length; function changeImg(){ // increment currentIndex in a circular way; after 4 comes 0 again currentIndex = ++currentIndex % length; image.src = images[currentIndex]; } document.getElementById("btn").addEventListener("click", changeImg);Su bucle for cambia img.src cinco veces inmediatamente, por lo que el resultado final es images[4] , no ve las otras imágenes.