مشكلة إخراج القائمة الكاملة للأرقام باستخدام innerhtml

Question

ما يلي هو رمز لإنشاء قائمة متسلسلة من الأرقام من 1 إلى 10. أود أخذ هذه القائمة والإخراج في "ترقيم" DIV باستخدام innerhtml. ومع ذلك ، عندما أقوم بتنفيذ البرنامج النصي ، فإن الشيء الوحيد الذي يتم إخراجه هو الرقم 10. عندما أقوم بالكتابة فوق الصفحة باستخدام المستند. الكتابة بدلاً من ذلك ، فإنه يخرج القائمة بأكملها. هل يمكن لأحد أن يخبرني بما أفعله خطأ؟ شكرًا.

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>

Answer 1

حسنًا ، يمكنك تجاوز innerHTML في كل خطوة.
محاولة:

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

أو أفضل:

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

هذا يحل محل innerHTML في كل مرة من خلال الحلقة ، لذلك ترى التكرار الأخير فقط.

حاول صنع ذلك = أ +=.

أو حتى أفضل ، قم بإنشائها في سلسلة وضبط innerHTML مرة واحدة فقط مع تلك السلسلة النهائية. سيكون هذا أسرع لأنه لا يتعين عليه سوى تحليل السلسلة كـ HTML مرة واحدة بدلاً من 100 مرة.