ظهور القيمة الأخيرة فقط عند طباعة القيم باستخدام جافاسكربت

السبب في هذا الأمر هو أنك في كل دورة من دورات الحلقة تقوم بإعادة تعيين محتوى الوسم الذي له ال id demo و لا تقوم بالإضافة للقيمة السابقة، لذلك يظهر لك في المتصفح القيمة الأخيرة(التي تنتهي عندها الحلقة).

إذًا ما نحتاج إليه هو إضافة القيمة الجديدة إلى القيم الموجودة داخل الوسم بالطريقة التالية

document.getElementById('demo').innerHTML = document.getElementById('demo').innerHTML + "<p>" + i + "</p>";

و الذي يكافئ

 document.getElementById('demo').innerHTML += "<p>" + i + "</p>";

var i;
var x = document.getElementById('num');

function typeWord(){
  var y = x.value;

  for( i=y; i>0; i--){
    console.log(i);
    document.getElementById('demo').innerHTML += "<p>" + i + "</p>";
  }

}

إستخدم  insertAdjacentHTML بدلا من insertHtml  لأن insertHtml  تغير  element في كل دورة و تضع مكانه العنصر الجديد و لكن insertAdjacentHTML تضيف العنصر الجديد  فقط كالأتي

for( i=y; i>0; i--){

console.log(i)
    
    document.getElementById('demo').insertAdjacentHTML('beforeend',"<p>"+i+"</p>")
}

و لاحظ أن المتغير الأول beforeend تضيف element قبل نهاية selector

يمكنك استخدام طريقة insertAdjacentHTML () لواجهة Element بتوزيع النص المحدد بتنسيق HTML أو XML وإدراج العقد الناتجة في شجرة DOM في موضع محدد. لا يقوم بإعادة توزيع العنصر الذي يتم استخدامه عليه ، وبالتالي لا يفسد العناصر الموجودة داخل هذا العنصر. هذا يتجنب الخطوة الإضافية للتسلسل ، مما يجعلها أسرع بكثير من التلاعب المباشر بالداخل.

element.insertAdjacentHTML(position, text);

position
سلسلة DOM تمثل الموضع بالنسبة للعنصر 

• "beforebegin": قبل العنصر نفسه.
• 'afterbegin': داخل العنصر ، قبل طفله الأول.
• "beforeend": داخل العنصر ، بعد آخر طفل له.
• "afterend": بعد العنصر نفسه.

text
السلسلة المراد تحليلها بتنسيق HTML أو XML وإدراجها في الشجرة.

<!-- beforebegin -->
<span id="demo">
  <!-- afterbegin -->
  foo
  <!-- beforeend -->
</span >
<!-- afterend -->

var i;
var x = document.getElementById('num');

function typeWord(){

    var y = x.value;
 
    for( i=y; i>0; i--){
        console.log(i);
        document.getElementById('demo').insertAdjacentHTML('beforeend',"<p>"+i+"</p>");
    }

}