Проблема вывода полного списка чисел с использованием innerhtml
-
25-09-2019 - |
Вопрос
Ниже приведен код для создания последовательного списка чисел от 1 до 10. Я хотел бы взять этот список и выводить в Div «Pagination», используя innerhtml. Однако, когда я выполняю скрипт, единственное, что выводит, это номер 10. Когда я перезаписываю страницу, используя Document.Write вместо этого, он выводит весь список. Может кто-нибудь сказать мне, что я делаю не так? Спасибо.
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>";
}
}
А в HTML:
<div id="pagination"></div>
Решение
Ну, вы переопределите innerHTML
на каждом шаге.
Пытаться:
document.getElementById("pagination").innerHTML += numbers[i] + "<br>";
Или лучше:
// no for loop
document.getElementById("pagination").innerHTML = numbers.join("<br>");
Другие советы
for(var i = 0; i < numbers.length; i++) {
document.getElementById("pagination").innerHTML = numbers[i] + "<br>";
}
Это заменяет innerHTML
Каждый раз через петлю, так что вы видите только последнюю итерацию.
Попробуйте сделать это =
а. +=
.
Или даже лучше, постройте его в строке и установите innerHTML
только один раз с этой последней строкой. Это будет быстрее, поскольку он должен разбирать строку как HTML один раз вместо 100 раз.