Multiple sliders with JQuery with arrays-CodePudding

I am trying to build a slider that changes images depending on the region one clicks on a map. I want to use arrays to store images in the js file, not to list them in the HTML. However, the console reports "imageArray[imageIndex]:1 GET http://localhost:8000/imageArray[imageIndex] 404 (File not found)"

HTML

<div >
<img id="mainImage" src="Photos/OG/P1000609.JPG" style="width:100%">
<button onClick="changeImage()">next</button>

JQuery


var imageArray = ["Photos/OG/P1000389.jpg", "Photos/OG/P1000409.jpg","Photos/OG/P1000589.jpg"];
var imageIndex =0;

function changeImage(){
$("#mainImage").attr("src", "imageArray[imageIndex]");
imageIndex   ;
sliderLenght = imageArray.lenght;
if (imageIndex> sliderLenght) {imageIndex = 0}
};


function changeArray(e){
    imageArray = e
}

var region1Array= ["Photos/OG/P1000412.jpg", "Photos/OG/P1000414.jpg"];

$("#region1").click(changeArray(region1Array));

I tried substituting the images, and the folders but it does not work. Is there a way to make it work using arrays, or even just to find this one?

CodePudding user response：

Since, the paths of your images are stored in the array imageArray, you should just assign it directly to the attr(). Don't enclose it with quote or doublequotes.

Besides that, JavaScript array length should be array.length, but it was typo in your code that you wrote it as lenght.

In the snippet below, I change the mechanism to change the index first responding to the click then assign the element at the current index (after updated) of the imageArray to the src attribute of the img element.

var imageArray = ["https://i1.sndcdn.com/avatars-000708374642-k6d7gm-t500x500.jpg", "https://media.wired.com/photos/5926db217034dc5f91becd6b/master/w_2560,c_limit/so-logo-s.jpg"];
var imageIndex =0;

function changeImage(){
  var sliderLenght = imageArray.length;
  if (imageIndex < sliderLenght - 1) {
    imageIndex  ;
  } else imageIndex = 0;
  
  $("#mainImage").attr("src", imageArray[imageIndex]);
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >
  <img id="mainImage" src="https://i1.sndcdn.com/avatars-000708374642-k6d7gm-t500x500.jpg" style="width:100%">
  <button onClick="changeImage()">next</button>
</div>

Besides that, you can improve the code by removing the onClick attribute on button and add the click event listener on the Javascript

var imageArray = ["https://i1.sndcdn.com/avatars-000708374642-k6d7gm-t500x500.jpg", "https://media.wired.com/photos/5926db217034dc5f91becd6b/master/w_2560,c_limit/so-logo-s.jpg"];
var imageIndex =0;

$('#button').click(() => {
  var sliderLenght = imageArray.length;
  if (imageIndex < sliderLenght - 1) {
    imageIndex  ;
  } else imageIndex = 0;
  
  $("#mainImage").attr("src", imageArray[imageIndex]);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >
  <img id="mainImage" src="https://i1.sndcdn.com/avatars-000708374642-k6d7gm-t500x500.jpg" style="width:100%">
  <button id="button">next</button>
</div>