CODEWITHSUNDEEP
javascripthtmlimage
Aaron Macaulay
Aaron Macaulay

Reputation: 27

Change Image on click (6 Image Loop)

I have 6 images that I want to swap between by clicking on the image but I can't seem to get the code right in order to make it go to the next picture

HTML

    <img src="BCover.jpg" id="ImgGallery" onclick="ImgGallery()"/>

JavaScript

var counter = 1;

ImgGallery.onclick = function (){
if (counter == 1){
    document.getElementById("ImgGallery").src = "BCover.jpg";
    counter++;
}
else if (counter == 2){
    document.getElementById("ImgGallery").src = "MechGP.jpg";
    counter++;
}
else if (counter == 3){
    document.getElementById("ImgGallery").src = "Mech2.jpg";
    counter++;
}
else if (counter == 4){
    document.getElementById("ImgGallery").src = "Mech3.jpg";
    counter++;
}
else if (counter == 5){
    document.getElementById("ImgGallery").src = "Mech4.jpg";
    counter++;
}
else if (counter == 6){
    document.getElementById("ImgGallery").src = "MCA1.png";
    counter==1;
}
};

Upvotes: 0

Views: 3039

Answers (3)

Steven Moseley
Steven Moseley

Reputation: 16325

The problem (other than Spencer's comment about == assignment) seems to be that ImgGallery should be the name of a function, not a reference to the element, as it's being called as a function in the onclick attribute of your img element.

I renamed the ImgGallery() function to rotateGallery to eliminate ambiguity with the id of the element.

I also took some liberty to clean up your code a little by using array cycling instead of a switch statement to handle img gallery rotation.

<img src="BCover.jpg" id="ImgGallery" onclick="rotateGallery()"/>


var counter = 0,
    gallery = ["BCover.jpg", "MechGP.jpg", "Mech2.jpg", "Mech3.jpg", "Mech4.jpg", "MCA1.png"],
    rotateGallery = function () {
        document.getElementById("ImgGallery").src = gallery[counter];
        counter++;
        if (counter >= gallery.length) {
            counter = 0;
        }
    };

Upvotes: 2

Oliver
Oliver

Reputation: 1644

ImageGallery isn't a function, which will cause an error.

However, the main error is counter==1;, on the third last line. The == operator is for testing if a value has equal value (not necessarily equal type though), but for assignment, use the normal = operator. Try this:

//First, create an array of images (so you can support as many images in the gallery as needed, only needing to update this array)
var images = ["BCover.jpg", "MechGP.jpg", "Mech2.jpg", "Mech3.jpg", "Mech4.jpg", "MCA1.png"],
    //and a counter to loop through
    c = 0;

//this function is triggered when the image is clicked on sending the image element as a parameter
function nextImg(elem){
  //if c is less than the array's length - 1, then add 1 to c, otherwise make c equal 0
  c = (c != images.length - 1) ? c + 1 : 0;
  //actually change the src attribute of the image
  elem.src = images[c];
  //and just let you know what image you're up to
  document.getElementsByTagName('p')[0].innerHTML = 'Image no. '+(c+1)+'. File name of image: '+images[c];
}
/* Make the image visible */
img{
  cursor: pointer;
  height: 50px;
  width: 50px;
}
<img id='ImageGallery' onclick='nextImg(this)' />
<p>Notice the onclick attribute</p>

Upvotes: 0

Richard Hamilton
Richard Hamilton

Reputation: 26434

This can be DRYed up a bit. You can include all of your images in an array. JavaScript does not have a native cycle method but you can implement it with the following algorithm.

var images = ["BCover.jpg", "MechGP.jpg", "Mech2.jpg", "Mech3.jpg", "Mech4.jpg", "MCA1.png"];
var gallery = document.getElementById("ImgGallery");
var index = 0;

gallery.addEventListener("click", function() {
    gallery.src = images[index];
    index = (index === images.length - 1) ? 0 : index + 1;
});

I know the last statement inside the click listener may seem weird, but I wanted to write as little code as possible.

Upvotes: 2

Related Questions