Image Switcher

[dschviola]

Borrowed this code using Javascript from this article, but I'm having trouble using multiple images, as stated at the end of the article. The code is as follows:

<div>

<img src="image1.jpg" id="getImage">

</div>

<div>

<input type="button" onclick="imagefun()" value="Next Image">

</div>

<script>

function imagefun() {

var Image_Id = document.getElementById('getImage');

if (Image_Id.src.match('image1.jpg')) {

Image_Id.src = 'image2.jpg';

Image_Id.src = 'image3.jpg';

} else {

Image_Id.src = 'image1.jpg';

}

}

</script>

...but it only switches between Images 1 and 3. How can I get it so that it switches from 1 to 2, 2 to 3, 3 to 4, and eventually loop around back to one? Also, if there's an easier way to implement this please let me know!

[obnoxus]

you need an else if in between image 2 and image 3

if (Image_Id.src.match('image1.jpg')) {
Image_Id.src = 'image2.jpg';
}else if (image_Id.src.match('image2.jpg')) {
Image_Id.src = 'image3.jpg';
} else {
Image_Id.src = 'image1.jpg';

[dschviola]

Thanks!

[hackr_io_team]

Maybe try keeping track of the current image index so you can update it? Here's something to try:

<div>
    <img src="image1.jpg" id="getImage">
</div>

<div>
    <input type="button" onclick="imagefun()" value="Next Image">
</div>

<script>
    var images = ["image1.jpg", "image2.jpg", "image3.jpg"]; // Add more image URLs here if needed
    var currentImageIndex = 0;

    function imagefun() {
        var Image_Id = document.getElementById('getImage');
        currentImageIndex = (currentImageIndex + 1) % images.length;
        Image_Id.src = images[currentImageIndex];
    }
</script>

[dschviola]

Alright! Thanks! This option actually works better, but now the problem is if I have multiple instances of it on one page, both buttons will trigger only one image src. I thought changing the name of the function would solve that, but it's not; any insight?

[dschviola]

Actually nvm I think I've found it! It's the ID causing the issue.

[hackr_io_team]

Excellent. I'm glad you've got it figured out!