Области видимости переменной из вложенной функций?

Question

[artuh_a]

Всем привет!
Для карусели картинок написал простенький скрипт для их перещелкивания. Сначала сделал для каждой стрелки свою функцию changeSlideLeftPortfolio(); и changeSlideRightPortfolio();. Затем с целью оптимизации повторящегося кода решил реализовать с использованием 3-ей функции:

var changeSlidePortfolio = function (e) {
  e.preventDefault();

  var slides = document.getElementsByClassName('portfolio__col');
  var activeSlide = document.getElementsByClassName('portfolio__col-active')[0];
  var slidesLength = slides.length;

  for (var i = 0; i < slidesLength; i++) {
    if (slides[i] === activeSlide) break;

    var index = i;
  }
};

var changeSlideLeftPortfolio = function() {
  changeSlidePortfolio(event);

  if (index !== 0) {
    slides[index].classList.remove('portfolio__col-active');
    slides[index - 1].classList.add('portfolio__col-active');
  }
};

var changeSlideRightPortfolio = function() {
  changeSlidePortfolio(event);

  if (index !== slidesLength - 1) {
    slides[index].classList.remove('portfolio__col-active');
    slides[index + 1].classList.add('portfolio__col-active');
  }
};

<a href="#" class="portfolio__arrow portfolio__arrow-left" onclick="changeSlideLeftPortfolio();"></a>
<a href="#" class="portfolio__arrow portfolio__arrow-right" onclick="changeSlideRightPortfolio();"></a>

В итоге каждая из функций прокрутки не видит переменную index из вложенной функции и выдает ошибку: Uncaught ReferenceError: index is not defined.
Подскажите, что делаю не так?

Answer 1

[Антон Спирин]

Естественно, она же в локальном скоупе функции changeSlidePortfolio определена.
Ваши функции можно объединить в одну:

var changeSlidePortfolio = function (e) {
  e.preventDefault();
  var { action } = e.target.dataset;  

  var slides = document.getElementsByClassName('portfolio__col');
  var activeSlide = document.getElementsByClassName('portfolio__col-active')[0];
  var slidesLength = slides.length;

  for (var i = 0; i < slidesLength; i++) {
    if (slides[i] === activeSlide) break;

    var index = i;
  }

  var last = action === 'left' ? slidesLength - 1 : 0;

  if (index !== last) {
    var newIndex = action === 'left' ? index + 1 : index - 1;
    slides[index].classList.remove('portfolio__col-active');
    slides[newIndex].classList.add('portfolio__col-active');
  }
};

<a href="#" class="portfolio__arrow portfolio__arrow-left" data-action="left" onclick="changeSlidePortfolio();"></a>
<a href="#" class="portfolio__arrow portfolio__arrow-right" data-action="right" onclick="changeSlidePortfolio();"></a>

Comments

[artuh_a]

Вроде бы код без ошибок, проверил после каждой строки alert' ом, а css класс все равно не добавляется к изображениям. В консоли ошибок нет. И тут, наверное, action === 'right' должен быть.

[Антон Спирин]

artuh_a, нет тут по вашему кодуaction === 'left'
Значит неправильный алгоритм написали. Объединил я по вашему коду. Проверить его возможности естественно нет. Меня эта часть смущает:

for (var i = 0; i < slidesLength; i++) {
  if (slides[i] === activeSlide) break;
  var index = i;
}

Не знаю как вы собрались использовать это в обоих направлениях.

[artuh_a]

Антон Спирин, исправил на

if (slides[i] === activeSlide) {
      var index = i;
    }

все заработало, большое спасибо!

Answer 2

[Rsa97]

А что мешает вернуть index как результат функции changeSlidePortfolio?

Comments

[artuh_a]

...
    var index = i;
  }
  return index;
};

та же ошибка

[Rsa97]

artuh_a, index у вас определён только внутри цикла. Объявите его заранее.