Probleme Ausgabe vollständige Liste der Zahlen mit innerHTML-

Question

ist die folgende Code eine sequentielle Liste von Zahlen von 1 bis 10 zu schaffen, würde Ich mag diese Liste nehmen und Ausgabe in der div „Paginierung“ mit innerHTML-. Allerdings, wenn ich das Skript ausführen, das einzige, was ausgegeben wird, ist die Nummer 10. Wenn ich die Seite mit document.write stattdessen überschreiben, es gibt die ganze Liste. Kann mir jemand sagen, was mache ich falsch? Danke.

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>";
    }
}

und im HTML:

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

Answer 1

Nun, Sie innerHTML in jedem Schritt außer Kraft setzen.
Versuchen Sie:

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

Oder besser:

// 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>";
}

Dies ersetzt die innerHTML jedes Mal durch die Schleife, so dass Sie nur die letzte Iteration sehen.

Versuchen Sie, dass = eine += zu machen.

oder noch besser, bauen sie in einer Reihe auf und stellen Sie die innerHTML nur einmal mit diesem letzten String. Dies wird schneller sein, da es nur die Zeichenfolge als HTML zu analysieren hat einmal statt 100 mal.