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

141

26 декабря 2017, 18:36

При нажатии на button выводятся все элементы массива:

var wrapper = document.getElementById('wrapper');
var button = document.getElementById("button");
var array = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10"];
button.onclick = function() {
    var addString = "";
    for (i=0; i<array.length; i++) {
        addString += array[i] + "<br>";
        };
    wrapper.insertAdjacentHTML("beforeend", addString);
};

Как выполнить поочередный вывод, к примеру, пяти элементов из массива при каждом нажатии кнопки? Таким образом: *1-е нажатие - выводится 0,1,2,3,4, *2-е нажатие - следующие пять и т.д.

Answer 1

Можно добавить переменные и проверять их в цикле. Вот, например, так:

var wrapper = document.getElementById('wrapper'); 
var button = document.getElementById('button'); 
var array = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10"]; 
var currentIndex = 0; 
var currentLimit = 5; 
 
function showArray() { 
  currentLimit += currentIndex; 
  for (currentIndex; currentIndex < currentLimit && currentIndex < array.length; currentIndex++) { 
    wrapper.innerHTML += array[currentIndex] + "<br />"; 
  }; 
}

<input type="button" value="go" onclick="showArray();" /> 
<div id='wrapper'></div>

Answer 2

var $button = document.querySelector('button'), 
    $pre = document.querySelector('pre'), 
    // массив символов для вывода 
    safe_list = '1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split(''), 
    // т.к. алгоритм будет вырезать из массива значения, скопируем его 
    // что бы не изменять исходный массив (просто хорошая практика) 
    used_list = safe_list.slice(); 
 
$button.addEventListener('click', function(){ 
  // вырезаем первые пять элементов, и объединяем их в строку с разделителем '<br>' 
  $pre.innerHTML = used_list.splice(0, 5).join('<br>'); 
});