Problemi Emissione elenco completo dei numeri utilizzando innerHTML

Question

Di seguito viene riportato il codice per creare un elenco sequenziale di numeri da 1 a 10. Mi piacerebbe prendere questa lista e l'uscita nella "impaginazione" div utilizzando innerHTML. Tuttavia, quando ho eseguire lo script, l'unica cosa che viene emesso è il numero 10. Quando ho sovrascrivere la pagina utilizzando document.write invece, emette l'intera lista. Qualcuno può dirmi che cosa sto facendo male? Grazie.

function generateNumbers() {
    var numbers = new Array();

    // start generating numbers
    for(var i = 1; i <= 10; i+= 1) {
        numbers.push( i );
    }

    // print numbers out.
    for(var i = 0; i < numbers.length; i++) {
        document.getElementById("pagination").innerHTML = numbers[i] + "<br>";
    }
}

e nel codice HTML:

<div id="pagination"></div>

Answer 1

Bene, si ignora innerHTML in ogni passo.
Prova:

document.getElementById("pagination").innerHTML += numbers[i] + "<br>";

O meglio:

// no for loop
document.getElementById("pagination").innerHTML = numbers.join("<br>");

Answer 2

for(var i = 0; i < numbers.length; i++) {
    document.getElementById("pagination").innerHTML = numbers[i] + "<br>";
}

Questo sostituisce il innerHTML ogni volta attraverso il ciclo, in modo da vedere solo l'ultima iterazione.

Prova facendo che = un +=.

O, meglio ancora, costruirla in una stringa e impostare il innerHTML solo una volta con quella stringa finale. Questo sarà più veloce dal momento che ha solo per analizzare la stringa come HTML una volta invece di 100 volte.