Надо чтобы бралось следующее или предыдущее значение массива в зависимости от того какую пользователь нажмёт кнопку

Question

Надо чтобы бралось следующее или предыдущее значение массива в зависимости от того какую пользователь нажмёт кнопку и перемещение между элементами было как по лесенке. Заранее спасибо!

let arr = [1, 2, 3, 4, 5]
let nextCurrentIndex = 0;
let nextCurrentLimit = 1;
let prevCurrentIndex = arr.length - 1;
let prevCurrentLimit = arr.length - 1;
let arrMax = arr[arr.length - 1];

newButton.onclick = function () {
    for (; nextCurrentIndex < nextCurrentLimit && nextCurrentIndex < arr.length; nextCurrentIndex++) {
        console.log(arr[nextCurrentIndex])
    };
    nextCurrentLimit++;
        if(nextCurrentLimit > arr.length){
            nextCurrentIndex = 0;
            nextCurrentLimit = 1; 
        }
}

oldButton.onclick = function () {
    for (let i = 0; prevCurrentIndex == prevCurrentLimit && i <= prevCurrentIndex; prevCurrentIndex--) {
        console.log(arr[prevCurrentIndex]);
    }
    prevCurrentLimit--;
    if(prevCurrentLimit < 0){
        prevCurrentIndex = arr.length - 1;
        prevCurrentLimit = arr.length - 1; 
    }
}

Answer 1

Ваш код можно было конечно просто доработать, но свои велосипеды ближе к телу xDD

// Все что требуется "снаружи" - массив и текущий индекс
let index = 0;
const arr = [1,2,3,4,5];
// Для удобства, объединяем кнопки общим селектором
// в данном случае data-js=[button]
const buttons = document.querySelectorAll('[data-js=button]');
const handler = ({ target }) => {
  // Атрибутом data-type разделяем логику
  const { type } = target.dataset;
  
  // Проверяем какая именно кнопка нажата
  if (type === 'new') {
    index = (
      index === arr.length - 1
        ? 0
        : index + 1
    );
  } else {
    index = (
      index === 0
        ? arr.length - 1
        : index - 1
    );
  }
  
  console.log(arr[index]);
};

// Навешиваем на нашу группу кнопок слушатель события 'click'
buttons.forEach((button) => {
  button.addEventListener('click', handler);
});

<button data-js="button" data-type="old">Old</button>
<button data-js="button" data-type="new">New</button>

Answer 2

Ну или можно так:

let p = document.querySelector('.p');
let prev = document.querySelector('.prev');
let next = document.querySelector('.next');
let arr = [1, 2, 3, 4, 5];
let current = -1;

next.onclick = function() {
  current = ++current % arr.length;
  p.innerText = arr[current];
}

prev.onclick = function() {
  if (--current < 0) {
  	current = arr.length - 1;
  }
  p.innerText = arr[current];
}

<button class="prev">Prev</button>
<button class="next">Next</button>
<p class="p"></p>

БЛОГ НА HUSL

Надо чтобы бралось следующее или предыдущее значение массива в зависимости от того какую пользователь нажмёт кнопку

Ответы (2 шт):