i want to change image using for loop in js without using jQuery-CodePudding

i don't understand why this is not working? plz tell me what i missed in this code ** html **

<div id="img">
            <img 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)

CodePudding user response：

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>

CodePudding user response：

Is this what you wish to achieve?

var images = new Array();
var imgIndex = 0;

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() {
  var myImg = document.getElementById("myImg");
  if (imgIndex < images.length - 1) {
    imgIndex  ;
  } else {
    imgIndex = 0;
  }

  myImg.src = images[imgIndex];
}

document.getElementById("btn").addEventListener("click", changeImg);

<div id="img">
  <img id="myImg"  src="images/boy1.jpg">
</div>

<button id="btn">Next</button>

CodePudding user response：

Your for loop changes img.src five times immediately and so the final result is images[4], you don't see the other images.

CodePudding user response：

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);