Блог

Главная - Вопросы по программированию - Функция Javascript продолжается на шаг дольше, чем необходимо

Функция Javascript продолжается на шаг дольше, чем необходимо

#javascript #html #function

Вопрос:

У меня есть функция, которая продолжается на один шаг дольше, чем необходимо. При нажатии на изображение (elefant.png) изображение (scale1.png) изменяется. Есть 5 картинок, и это прекрасно работает. Проблема в том, что когда отображается последнее изображение и я снова нажимаю (elefant.png), появляется неопределенное изображение? Я не понимаю, почему он просто не останавливается на последней картинке (масштаб 5.png)?

 <!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <link rel="stylesheet" href="style.css">
  <body>

    <div class="wrapper1">

      <h2 id="title_text">Hey</h2>

        <img src="image/scale1.png" id="getImage">

        <img src="image/elefant.png" style="width:250px; height:auto;" onclick="imagefun()">



    </div>

    <script type="text/javascript">

        var counter = 0,
    gallery = ["image/scale2.png", "image/scale3.png", "image/scale4.png", "image/scale5.png"],
    imagefun = function () {
        document.getElementById("getImage").src = gallery[counter];
        counter  ;
        if (counter >= 4) {
            document.getElementById("title_text").innerHTML = "New text!";
        }

    };

    </script>


  </body>
</html>

Это может быть простым решением, но я плохо разбираюсь в javascript. Я попытался найти ответ, но я не уверен, что даже искать, так как я не знаю, в чем причина проблемы?

Ответ №1:

Я не совсем уверен, каким должен быть ваш конечный результат, как только вы достигнете конца массива галереи, но в нынешнем виде он меняет title_text на «Новый текст!».

Проблема с вашим кодом в его нынешнем виде заключается в том, что вы всегда увеличиваете счетчик и изменяете исходное значение getImage на основе этого целого числа. Это не прекратится, как только ваш счетчик достигнет 4.

Я бы использовал длину массива в качестве точки остановки и увеличивал переменную счетчика только до тех пор, пока не будет достигнут этот предел. Я бы написал что-то вроде этого:

 var counter = 0,
gallery = ["image/scale2.png", "image/scale3.png", "image/scale4.png", "image/scale5.png"],
imagefun = function () {
  if (counter >= gallery.length) {
      document.getElementById("title_text").innerHTML = "New text!";
  }
  else{
      document.getElementById("getImage").src = gallery[counter];
      counter  ;
  }
}; 
 <div class="wrapper1">
  <h2 id="title_text">Hey</h2>
  <img src="image/scale1.png" id="getImage">
  <img src="image/elefant.png" style="width:250px; height:auto;" onclick="imagefun()">
</div>

Ответ №2:

Вы всегда запускаете функцию и меняете источник изображения, и только затем проверяете counter его значение. Вот почему он будет продолжать работать и изменять источник, даже если счетчик больше 3.

Решением было бы изменить counter значение s условно:

 if (counter < gallery.length - 1) {
  counter  ;
}
Метки: ,