Change an image to a new image with Javascript each time the image is clicked

Question

I have a folder of images and I want to replace the one currently being displayed with another image each time that it is clicked on.

I've managed to make this happen once - i.e. to make the if statement work, but I can't get to the elif statement. Why is the elif condition not being met. Everytime I click it just repeats the if statement, even though the console log shows that the backgroundImage is now budgies: url("http://localhost:3000/images_diamonds/budgies.jpg")

// For clicking on the image
document.querySelector('.diamond-pic').addEventListener('click', () => {
    
  let elem = document.getElementById('pic1');
  let ht = window.getComputedStyle(elem, null).getPropertyValue("background");
  console.log(ht)


  if (document.getElementById('pic1').style.backgroundImage="url(../../images_diamonds/ghecko.jpg)") {
    document.getElementById("pic1").style.backgroundImage = "url('../../images_diamonds/budgies.jpg'";
    console.log('if achieved')

  } else if (document.getElementById('pic1').style.backgroundImage="url(../../images_diamonds/budgies.jpg)") {
    document.getElementById("pic1").style.backgroundImage = "url('../../images_diamonds/Christmas_Beetle.jpg'";
    console.log('else if achived')

  } else {
    console.log('else achieved')
  }
}); 

Answer 1

The simplest way to do this is to keep the image names in an array and then just advance the image to the next one in the array when it's clicked.

let counter = 0;
let imgs = [
  "https://static4.depositphotos.com/1026550/376/i/600/depositphotos_3763236-stock-photo-gold-star.jpg",
  "https://previews.123rf.com/images/lineartestpilot/lineartestpilot1803/lineartestpilot180302423/96543894-cartoon-shooting-star.jpg",
  "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTk5tGujYXbv4f9A0pvSuOWC6IhljTzmy4WBw&usqp=CAU",
  "http://www.webweaver.nu/clipart/img/nature/planets/smiling-gold-star.png",
  "https://upload.wikimedia.org/wikipedia/commons/thumb/3/34/Red_star.svg/2000px-Red_star.svg.png"
];

document.querySelector("img").addEventListener("click", function(event){
  this.src = imgs[counter];
  // As long as the counter is less than the last index in the array
  // increase the counter. Otherwise, start over.
  counter = counter < imgs.length-1 ? counter+1 : 0;
});

img { width: 200px;}

<img src="https://previews.123rf.com/images/lineartestpilot/lineartestpilot1802/lineartestpilot180274309/95545188-shooting-star-decorative-cartoon.jpg">

And here's an example when the images are used as backgrounds:

let counter = 0;
let imgs = [
  "https://static4.depositphotos.com/1026550/376/i/600/depositphotos_3763236-stock-photo-gold-star.jpg",
  "https://previews.123rf.com/images/lineartestpilot/lineartestpilot1803/lineartestpilot180302423/96543894-cartoon-shooting-star.jpg",
  "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTk5tGujYXbv4f9A0pvSuOWC6IhljTzmy4WBw&usqp=CAU",
  "http://www.webweaver.nu/clipart/img/nature/planets/smiling-gold-star.png",
  "https://upload.wikimedia.org/wikipedia/commons/thumb/3/34/Red_star.svg/2000px-Red_star.svg.png"
];

document.querySelector("div").addEventListener("click", function(event){
  this.style.background = "url(" + imgs[counter] + ")";
  // As long as the counter is less than the last index in the array
  // increase the counter. Otherwise, start over.
  counter = counter < imgs.length-1 ? counter+1 : 0;
});

div { width: 300px;
      height:300px; border:1px solid black;  background:url("https://previews.123rf.com/images/lineartestpilot/lineartestpilot1802/lineartestpilot180274309/95545188-shooting-star-decorative-cartoon.jpg");
}

<div></div>