i don't understand why this is not working? plz tell me what i missed in this code ** 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)
try it:
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>Your loop always takes the last image and sets it to be the source of the img tag, what you need to be doing is changing the index and then only set the indexed image to be the source:
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);
Your for loop changes img.src five times immediately and so the final result is images[4], you don't see the other images.