Вывод элементов массива по порядку при нажатии (По одному элементу)

Хочу чтобы при нажатии кнопки выводился один элемент массива, при повторном следующий и так далее. Но получается что выводиться 1, 2, потом 3, 4 уже выводиться вместе. А надо чтобы выводился один элемент. Помогите пожалуйста. Заранее спасибо!

let newButton = document.querySelector('.new-button');
let block = document.querySelector('.block');

let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
let currentIndex = 0;
let currentLimit = 1;

newButton.onclick = function showArray() {
    currentLimit += currentIndex;
  for (currentIndex; currentIndex < currentLimit && currentIndex < arr.length; currentIndex++) {
    block.innerHTML += arr[currentIndex] + "<br />";
  };
}

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

Автор решения: Денис Степанов

Вы там напутали с увеличением currentLimit.
currentLimit += currentLimit -> currentLimit += 1;

let newButton = document.querySelector('.new-button');
let block = document.querySelector('.block');

let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
let currentIndex = 0;
let currentLimit = 1;

newButton.onclick = function showArray() {
  for (; currentIndex < currentLimit && currentIndex < arr.length; currentIndex++) {
    block.innerHTML += arr[currentIndex] + "<br />";
  };
  
  currentLimit++;
}
<div class="block"></div>
<button class="new-button">кнопка</button>

let newButton = document.querySelector('.new-button');
let block = document.querySelector('.block');

let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];


newButton.onclick = ((currentPosition = 0) => () => {
  if (currentPosition < arr.length) {
    block.innerHTML += arr[currentPosition++] + "<br />"
  };
})();
<div class="block"></div>
<button class="new-button">кнопка</button>

→ Ссылка