Почему когда доходит до конца, требуется двойной клик и выдает ошибку?

Question

[anton_trofimov95]

Вот код . Когда дохожу до конца вниз, требуется двойной клик, чтобы пошло обратно. Также происходит, когда дохожу до конца вверх. И если нажать скрыть например в середине, скрывает то по 1, то по 2. Что здесь не так?

Answer 1

[Сергей Соколов]

В вашем коде косяк в том значении, которое принимает i после обновления.
Например, было 0.
Нажали "Показать".i++, i++ // i === 2
Нажали "Скрыть".
Скрывается соответствующий текущему значению i===2 (0, 1, 2 - т.е. третий, он и так пока скрыт).
i уменьшается на 1.
Скрывается соответствующий нынешнему i===1 (т.е. второй, был видимым).
И потом i становится равным 0. Остался видимым нулевой.
Надеюсь, понятна причина видимости одного.
Это лечится костылём: замените оба i-- на --i.
Но это не устранит другой проблемы: i может уезжать в минус.

Предлагаю держать переменную, определяющую сколько элементов сейчас видимы.
И функцию, которая только исходя из этой переменной показывает/прячет нужное число элементов.

код

const divs = document.querySelectorAll('div')
const length = divs.length;
const btnShow = document.querySelector('.show')
const btnHide = document.querySelector('.hide')

function showVisible(visible) {
  const toShow = Math.min(visible, length);

  for (let i=0; i < length; i++) {
      divs[i].style.display = i < toShow ? 'block' : 'none';
  }
}

let visible = 0;
showVisible(visible);

btnShow.addEventListener('click', function () {
  visible = Math.min(visible + 2, length);
  showVisible(visible);
});

btnHide.addEventListener('click', function () {
  visible = Math.max(visible - 2, 0);
  showVisible(visible);
});