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!

Answer 1

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>