Change picture in an array with button click

Question

I have a question concerning pictures in an array. I am able to change the picture with a click, but only once. This is my code with some example pictures. There are a lot of tutorials on the net but maybe too complex for me so I created a simple thing.

<html>
<head>
    <script type="text/javascript">
        //here I am creating my array
        var myPicture = [
            "http://www.bildersuche.org/images/logos/pixabay-logo.png",
            "http://www.bildersuche.org/images/logos/123rf-logo.jpg",
            "http://www.java2s.com/style/download.png"
        ]

        // this should be the function and I think here is the error
        function nextPic() {
            myPicture[1] = document.images;
        }
    </script>
</head>
<body>
    <img src="http://www.java2s.com/style/download.png" width="107" height="98" />
    <form>
        <input type="button" onclick="nextPic()" value="Change image">
    </form>
</body>
</html>

The simple question is, what do I have to change in my code to show the second, third, x pic with one click. Or is there an simple jQuery function for it?

This appears to be a very half-hearted attempt... I'm curious to know: why do you think what you have written should work? From this I should be able to figure out how to guide you. — Niet the Dark Absol
– Niet the Dark Absol, Commented Apr 10, 2016 at 21:07

tdc · Accepted Answer · 2016-04-10 21:18:57Z

Here's a working example: http://jsbin.com/dubuhizucu/edit?html,console,output

so a couple of things..

1) you need a variable to keep track of where you are in your pictures array.

2) on click, increment that variable from step 1. then, check if it's bigger than the length of your pictures array. if it is then we need to reset it back to 0.

3) simply set the src attribute on the image to the URL from your pictures array, setting the index to whatever the value of counter is!

<!DOCTYPE html>
<html>
<head>
</head>
<body>
  <img id="target" src="http://www.java2s.com/style/download.png" width="107" height="98" />
  <input type="button" onclick="nextPic()" value="change image" />



    <script>
    var target = document.getElementById('target');
    var counter = 0;
    var myPictures = [
        "http://www.bildersuche.org/images/logos/pixabay-logo.png",
        "http://www.bildersuche.org/images/logos/123rf-logo.jpg",
        "http://www.java2s.com/style/download.png"
    ];

    function nextPic() {
      counter += 1;
      if (counter > myPictures.length -1) {
        counter = 0;
      }
      target.src = myPictures[counter];
    }
  </script>
</body>
</html>

theblindprophet · Accepted Answer · 2016-04-10 21:17:37Z

Give your img an id: id="img1"

Create a global variable, for example:

var x = 0;

A global variable is declared in the scope of the entire file, meaning it is not surrounded by any functions, loops, if statements, etc. Your array, myPicture is global.

Then in your function:

function nextPic()

Write instead:

function nextPic(){
    // Increment x by 1, x = x + 1
    x++;

    // Check if on last element of array, change x to first
    if(x >= myPicture.length) {
        x = 0;
    }

    // Use variable, declared as number, to access img in array
    document.getElementById("img1").src = myPicture[x];

}

If we do not check if x is greater than or equal to the array length then once we have iterated through each image we would attempt to access a null value of the array, one that does not exist.

Your example has an array length of 3, therefore it has indices 0-2. We cannot access any index greater than 2, therefore we set x back to 0.

Hatchet · Accepted Answer · 2016-04-10 21:19:29Z

Your nextPic function is a little bit backwards.

Each time nextPic is called, you're setting the second element in your myPicture array equal to document.images. That's not what you want. You want to set the src of the image (document.images[0]) equal to the next image URL, so you need a way to keep track of what image you're working with (currentImageIndex).

Here's a working example:

var myPicture = [
  "http://www.bildersuche.org/images/logos/pixabay-logo.png",
  "http://www.bildersuche.org/images/logos/123rf-logo.jpg",
  "http://www.java2s.com/style/download.png"
];

var currentImageIndex = 0;

function nextPic() {
  currentImageIndex = (currentImageIndex + 1) % myPicture.length;
  document.images[0].src = myPicture[currentImageIndex];
}

<img src="http://www.java2s.com/style/download.png" width="107" height="98" />
<form>
  <input type="button" onclick="nextPic()" value="Change image">
</form>

Collectives™ on Stack Overflow

Change picture in an array with button click

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related