Problema em produzir lista completa de números usando o InnerHTML
-
25-09-2019 - |
Pergunta
A seguir, é apresentado o código para criar uma lista seqüencial de números de 1 a 10. Gostaria de pegar esta lista e saída na "paginação" da div usando o InnerHTML. No entanto, quando executo o script, a única coisa que é emitida é o número 10. Quando substituo a página usando document.write, ele produz a lista inteira. Alguém pode me dizer o que estou fazendo de errado? Obrigado.
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 no HTML:
<div id="pagination"></div>
Solução
Bem, você substitui innerHTML
em cada passo.
Tentar:
document.getElementById("pagination").innerHTML += numbers[i] + "<br>";
Ou melhor:
// no for loop
document.getElementById("pagination").innerHTML = numbers.join("<br>");
Outras dicas
for(var i = 0; i < numbers.length; i++) {
document.getElementById("pagination").innerHTML = numbers[i] + "<br>";
}
Isso substitui o innerHTML
Todas as vezes durante o loop, então você só vê a última iteração.
Tente fazer isso =
uma +=
.
Ou melhor ainda, construa -o em uma corda e defina o innerHTML
Só uma vez com essa string final. Isso será mais rápido, pois só precisa analisar a string como HTML uma vez, em vez de 100 vezes.