changing image tag attribute using Javascript

Question

How do I complete the execute function, such that when the Next Image button is clicked, the next image in the images array is shown, and when I get to the end of the array, it should start from the beginning of the array.. so essentially, the Next Image button acts like a way to cycle through the images in the images array. NB: the image at the first index of the array is already shown. So when I click the button, the image at the second index should be shown.. and so on.

<!DOCTYPE html>
<html>

  <head>

  </head>

  <body>
    <button onclick='execute()'>Next Image</button>
    <div>
      <img src='https://bocageanimalhospital.com/wp-content/uploads/2020/09/iconfinder_1F431-cat-face_4888130.png' />
    </div>
  </body>
  <script>
    const images = [
  'https://bocageanimalhospital.com/wp-content/uploads/2020/09/iconfinder_1F431-cat-face_4888130.png',
  'https://catdoctorofmonroe.com/wp-content/uploads/2020/09/iconfinder_1F408-cat-B_4888072.png',
  'https://aux.iconspalace.com/uploads/cat-clean-icon-256.png'
    ]

    function execute() {
  
    }

  </script>

</html>

What have you tried so far?

Joshua
– Joshua

2021-07-08 09:05:43 +00:00
Commented Jul 8, 2021 at 9:05 — Joshua
– Joshua, Commented Jul 8, 2021 at 9:05

Sajeeb Ahamed · Accepted Answer · 2021-07-08 09:14:32Z

Keep an index variable outside of the execute function and increment it with every click of the Next button. If the index value exceeds the length of the images array then reset this by 0.

const images = [
  'https://bocageanimalhospital.com/wp-content/uploads/2020/09/iconfinder_1F431-cat-face_4888130.png',
  'https://catdoctorofmonroe.com/wp-content/uploads/2020/09/iconfinder_1F408-cat-B_4888072.png',
  'https://aux.iconspalace.com/uploads/cat-clean-icon-256.png'
];

const nextBtn = document.getElementById('next-btn');
const image = document.getElementById('image');
let imageIndex = 0;
image.setAttribute('src', images[imageIndex]);

const execute = (event) => {
  imageIndex++;

  if (imageIndex >= images.length) {
    imageIndex = 0;
  }

  image.setAttribute('src', images[imageIndex]);
}

nextBtn.addEventListener('click', execute);

<img src="https://bocageanimalhospital.com/wp-content/uploads/2020/09/iconfinder_1F431-cat-face_4888130.png" id="image" />
<button id="next-btn">Next</button>

Prakash S · Accepted Answer · 2021-07-08 09:14:44Z

You can have a simple index tracker for the array while looping and reset if it reaches the end of the images array.

<!DOCTYPE html>
<html>

<head>

</head>

<body>
  <button onclick='execute()'>Next Image</button>
  <div>
    <img id="image-holder" src='https://bocageanimalhospital.com/wp-content/uploads/2020/09/iconfinder_1F431-cat-face_4888130.png' />
  </div>
</body>
<script>
  const images = [
    'https://bocageanimalhospital.com/wp-content/uploads/2020/09/iconfinder_1F431-cat-face_4888130.png',
    'https://catdoctorofmonroe.com/wp-content/uploads/2020/09/iconfinder_1F408-cat-B_4888072.png',
    'https://aux.iconspalace.com/uploads/cat-clean-icon-256.png'
  ]
  var cIndex = 0

  function execute() {
    cIndex = cIndex + 1
    if (cIndex > images.length - 1) {
      cIndex = 0
    }
    document.getElementById("image-holder").src = images[cIndex]
  }
</script>

</html>

Collectives™ on Stack Overflow

changing image tag attribute using Javascript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related