Question

I am writing this in JavaScript, and the issue is that I can’t seem to figure out how to make a permutation. Ideally, I want to click the button and image would change to next, from a1.jpg to a2.jpg to a3.jpg to a4.jpg to a1.jpg and so on… But when I wrote this code, it would skip a2 and a3. I also did rearrange the conditionals since I realized that it reads from the top to bottom, but it would always skip one of the four pictures.

function changeImage() {
     if (document.images) {
          if (document["buttonOne"].src == a3.src){
          document["buttonOne"].src = a4.src}
     }
     if (document.images) {
          if (document["buttonOne"].src == a2.src){
          document["buttonOne"].src = a3.src
     }
     if (document.images) {
          if (document["buttonOne"].src == a1.src){
          document["buttonOne"].src = a2.src}
     }
     if (document.images) {
          if (document["buttonOne"].src == a4.src){
          document["buttonOne"].src = a1.src}
     }
     }

Answer 1

Try it in a more simple way

var imgs = ['a1.jpg', 'a2.jpg', 'a3.jpg', 'a4.jpg'];

function changeImage() {
    var img = document["buttonOne"];
    if (!img._index) img._index = 0;
    img.src = imgs[img._index++];
    if (img._index >= imgs.length) img._index = 0;
  }

img._index replaces the global variable with index of the shown image. Good to use when you want to change a few images, each of them will keep its own counter.

ps: if the only thing that changes is the number in the filename then the code can be even shorter without an array:

   function changeImage(max) {
        var img = document["buttonOne"];
        if (!img._index) img._index = 0;
        img.src = 'a' + img._index + '.jpg';
        if (img._index >= max) img._index = 0;
      }