Кнопки слайд-шоу работают только по второму клику при переходе к последнему слайду

Question

Я делаю слайд-шоу, которое использует данные JSON для заполнения их содержимого. Когда я подхожу к последнему слайду, мне нужно щелкнуть 2-3 раза, прежде чем слайд-шоу снова запустится на первом слайде. Я хочу убедиться, что этого не произойдет, и достаточно одного клика, чтобы снова начать первый слайд. Подобная ошибка возникает, когда я впервые загружаю страницу и нажимаю кнопку «Назад» в первый раз, когда мне нужно щелкнуть дважды, после этого она работает как надо. Я уверен, что в одном из моих утверждений if есть проблема, но я не могу понять, в чем дело.

index.html

<div class="slideshow-container">
    <div class="mySlides fade">
        <img id="image" style="width:100%" >
        <div id="description"></div>
    </div>
    <a id="prev">&#10094;</a>
    <a id="next">&#10095;</a>
</div>

<script>
    window.onload = startup;
    var xmlhttp;
    function startup () {
        xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = statechange;
        xmlhttp.open("GET", "slideshow.json", true);
        xmlhttp.send();
    }
    function statechange() {
        if (xmlhttp.readyState === 4 && xmlhttp.status === 200) {
            var printout = " ";
            var doc = JSON.parse(xmlhttp.responseText);
            var amountOfElements = doc.length;

            var current = 0;

            var imagePath = "assets/stop2/";
            document.getElementById("image").src = imagePath + doc[current].image;
            document.getElementById("description").innerHTML = doc[current].text;

            console.log(current);

            prev.onclick = function() {
                if(current !== 0){
                    current = current - 1;

                    document.getElementById("image").src = imagePath + doc[current].image;
                    document.getElementById("description").innerHTML = doc[current].text;

                    if(current === 0) {
                        current = amountOfElements;
                    }
                }
                else {
                    current = amountOfElements;
                }
                console.log(current);
            };

            next.onclick = function() {
                if(current < amountOfElements) {
                    current = current + 1;

                    document.getElementById("image").src = imagePath + doc[current].image;
                    document.getElementById("description").innerHTML = doc[current].text;
                }
                else {
                    current = -1;
                }
                console.log(current);
            };

        }
        else if (xmlhttp.readyState === 4 && xmlhttp.status === 404) {
            alert("Something went wrong");
        }
    }
</script> 

slideshow.json

  {
    "name": "First image",
    "text": "blablabla",
    "image": "img1.png",
    "audio": "audio1.mp3"
  },
  {
    "name": "Second image",
    "text": "Lorem ipsum..",
    "image": "img2.png",
    "audio": "audio2.mp3"
  },
  {
    "name": "Third image",
    "text": "blablabla",
    "image": "img3.png",
    "audio": "audio3.mp3"
  },
  {
    "name": "Last image",
    "text": "blablablaaaaaa",
    "image": "img4.png",
    "audio": "audio4.mp3"
  }
] ```

Answer 1

Вы делаете обновление только в блоке if, а не в блоке else. Я ставлю код обновления после оператора if / else. Более того, вы использовали количество элементов, но вы итерируете от 0, что неправильно. Вот почему я изменил его на количество элементов - 1. А в случае 3 -> 0 вы изменили шаг на -1 (не знаю почему?) Вместо 0.

prev.onclick = function() {
      if (current !== 0) {
        current = current - 1;
      } else {
        current = amountOfElements - 1;
      }

      document.getElementById("image").src = imagePath + doc[current].image;
      document.getElementById("description").innerHTML = doc[current].text;
    };

    next.onclick = function() {
      if (current < amountOfElements - 1) {
        current = current + 1;
      } else {
        current = 0;
      }

      document.getElementById("image").src = imagePath + doc[current].image;
      document.getElementById("description").innerHTML = doc[current].text;
    };

Answer 2

Если вы хотите бесконечное поведение l oop, попробуйте следующее:

var updateUI = function() {
    document.getElementById("image").src = imagePath + doc[current].image;
    document.getElementById("description").innerHTML = doc[current].text;
}

prev.onclick = function() {

    if(current <= 0) {
        current = amountOfElements - 1; // index of last element
    }
    else {
        current--;  // just decrement
    }

    console.log(current);
    updateUI();
};

next.onclick = function() {

    if(current < amountOfElements - 1) {
        current++; // just increment
    }
    else {
        current = 0; // start at first element
    }

    console.log(current);
    updateUI();
};

Проблема заключалась в том, что current = -1 и current = amountOfElements выходили за пределы, так что вам нужно было увеличить и уменьшать один или три раза, пока индекс не станет «действительным».