Problemas con el uso de botones JavaScript y HTML

Hola, tengo una lista de elementos de n cantidad. Lo que quiero hacer es que con un botón imprima los 5 elementos primeros del array y cuando le de click botón nuevamente imprima, desde donde se quedó hasta el décimo elemento y así sucesivamente hasta que se acaben los elementos del array; es decir, que imprima de cinco en cinco. El problema es que no se como definir que la variable aumente por cada ciclo :

El código es el siguiente:

<button type="button"onclick="crear_lista()">ciclofor</button>
<ul id="lista"></ul>

Y el documento de JavaScript es el siguiente:

var elementos = ["hola", "je", "que tra", "la", "nda", "qe", "sdd", "df", "dsff", "fv","sdcd"];
 
function crear_lista() {
  for (var i = 0; i < 5; i++) {
    var item=document.createElement("li");
    item.innerHTML=elementos[i];
    document.getElementById("lista").appendChild(item);
  }
 
  var boton=document.createElement("input");
  boton.value ='agregar mas elementos'; // 8
 
  document.getElementById("boton").appendChild(boton);
  boton.onclick = function () { imprimir_elementos(5); } 
}
 
function imprimir_elementos(inicio) {
  for (var i = inicio; i < 10; i++) {
    var item = document.createElement("li");
    item.innerHTML = elementos[i];
    document.getElementById("lista").appendChild(item);
  }
 
  var boton=document.createElement("input");
  boton.value ='+';    document.getElementById("boton").appendChild(boton);
  boton.onclick = function () { imprimir_elementos(inicio); } 
}

Respuestas

#1

La pista que te puedo dar para resolver el problema es que en JavaScript ya tienes una función que te coge los elementos de un array en grupos. Se llama splice() y le tienes que indicar como primer parámetro desde dónde empiezas a quitar elementos y como segundo parámetro, cuántos elementos quieres quitarle.

Como el array original se modifica cuando le quitas los elementos, puedes llamar a splice(0, 5) una y otra vez para ir quitando todos los elementos. No hace falta que modifiques el valor de los parámetros de splice(). Ejemplo:

var elementos = ["hola", "je", "que tra", "la", "nda", "qe", "sdd", "df", "dsff", "fv","sdcd"];
 
var primerGrupoDe5 = elementos.splice(0, 5);
var segundoGrupoDe5 = elementos.splice(0, 5);
var tercerGrupoDe5 = elementos.splice(0, 5);
// ...

Para ver si ya has llegado al final, puedes comprobar si el número de elementos del array es cero: if (elementos.length == 0) { ... }