Change Image on click in javascript with Array

Question

So I have a question. Right now I have a code that changes my image when I click on it, which is great. But I actually need it to function multiple times with different images. My conclusion: I need an array. However, I have yet to succeed in actually figuring out how to create a working one with this function.

I searched all over and managed to kind of gather a code that does something similar, but not quite (like changing images with an array but with an button) This JSfiddle is the one I'm talking about, with changing the image with the button https://jsfiddle.net/ffd7tmwy/1/

So I tried to edit it, but I failed. This is my attempt:

var change = document.getElementById('one');
var counter = 0;
var myPictures = [
    "url(img/one_two.jpg"
];

function nextPic() {
  counter += 1;
  if (counter > myPictures.length -1) {
    counter = 0;
  }
  change.src = myPictures[counter];
}

This is the one that is working but without the array or multiple pictures:

$(".one").on("click", function() {
  $(this).css("background-image", "url(img/one_two.jpg)");
});

This is another one that did not work..

var backgroundImg = new Array(); 
backgroundImage[0] = "url/one_two.jpg";

  ];

$(function() {
$('.one').on('click', function(){
  $('.one').css('background-image', 'url(' + backgroundImg[0] + ')');
  console.log(backgroundImg);
});

I hope someone could help me and explain how I could fix it.

Thanks!

Possible duplicate of Changing images using on click with arrays in javascript — Stephen P
– Stephen P, Commented Feb 8, 2018 at 21:00

Mike Cluck · Accepted Answer · 2018-02-08 20:55:58Z

2

Based on the one that works, it looks like you just need to modify your code to correctly modify the background-image CSS property instead of the src property. Here's your code but modified to do just that (and different image URLs):

var change = document.getElementById('one');
var counter = 0;
var myPictures = [
    "https://picsum.photos/200/200?image=929",
    "https://picsum.photos/200/200?image=735",
    "https://picsum.photos/200/200?image=1063",
];

function nextPic() {
  counter += 1;
  if (counter > myPictures.length -1) {
    counter = 0;
  }
  change.style.backgroundImage = "url(" + myPictures[counter] + ")";
}

// Here's how you can hookup the click event
change.addEventListener('click', nextPic);

// Load the first image
counter -= 1; // Do this so it starts at the first, not the second
nextPic();

#one {
  width: 200px;
  height: 200px;
  border: solid 1px #000;
}

<div id="one"></div>

If you wanted to make this work with multiple elements, you could create a function which hooks everything up for you and tracks which image is visible.

var myPictures = [
  "https://picsum.photos/200/200?image=929",
  "https://picsum.photos/200/200?image=735",
  "https://picsum.photos/200/200?image=1063",
];

function createImageSwitcher(elementID) {
  var element = document.getElementById(elementID);
  var counter = 0;

  function nextPic() {
    counter += 1;
    if (counter > myPictures.length - 1) {
      counter = 0;
    }
    element.style.backgroundImage = "url(" + myPictures[counter] + ")";
  }
  
  element.addEventListener('click', nextPic);
  
  // Load the first image
  counter -= 1;
  nextPic();
}

createImageSwitcher('one');
createImageSwitcher('two');
createImageSwitcher('three');

#one,
#two,
#three {
  width: 200px;
  height: 200px;
  border: solid 1px #000;
}

<div id="one"></div>
<div id="two"></div>
<div id="three"></div>

edited Feb 8, 2018 at 20:55

answered Feb 8, 2018 at 18:24

Mike Cluck

32.6k13 gold badges84 silver badges95 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

L Leah Over a year ago

I actually understand it now! Thank you so much! It works perfectly.

Mike Cluck Over a year ago

@LLeah Glad I could help!

L Leah Over a year ago

Oh! Another SMALL question: I have multiple divs that have to have this function. Right now if I copy the code and chance the id, it disables the previous function on the first div. Should I add/change something in order to make this work that you might know of? (sorry for the trouble btw!)

Mike Cluck Over a year ago

@LLeah Sure! Sorry for the late response. I've edited my answer to show how this could be done with multiple elements. Basically, you just have to wrap up the existing code into a function and call it for each thing you want to hook up.

Collectives™ on Stack Overflow

Change Image on click in javascript with Array

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related