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

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) { ... }

@javiereguiluz

10 abril 2017, 9:10