Modification interne d'un élément de l'élément pour la boucle d'une fonction

Question

Problème: Lors de la saisie d'un nombre supérieur à 10000, le texte interne du nouvel élément de paragraphe est mis à jour uniquement après la fin de la boucle for. Aidez-nous à faire en sorte que le texte interne soit mis à jour pour chaque numéro.

La fonction increment est appelée lorsqu'un événement onchange se produit après l'envoi d'un nombre en tant qu'entrée à l'élément d'entrée.

JAVASCRIPT:

function increment() { 
    var count = document.getElementById('ac_count').value; //ac_count is the id of the input element 
    var stat = document.createElement("p"); 
    stat.id = "current_status"; 
    stat.innerText = ""; 
    document.body.appendChild(stat); 
    stat.style.display = "block"; 
    for (g = 1; g < count; g++) { 
     stat.innerText = Number(g + 1) + " out of " + count + " records have been processed"; 
    } 
} 

Answer 1

Le DOM ne redessine pas avant le fil d'exécution est libre. Vous devez introduire des retards asynchrones dans votre code pour voir une mise à jour progressive.

function increment() { 
 
    var count = document.getElementById('ac_count').value; 
 
    var stat = document.createElement("p"); 
 
    stat.id = "current_status"; 
 
    document.body.appendChild(stat); 
 

 
    var g = 1 
 
    var itvl = setInterval(function() { 
 
    update(g); 
 
    g += Math.floor(Math.random() * 20) + 1 
 
    if (g >= count) { 
 
     clearInterval(itvl); 
 
     update(count); 
 
    } 
 
    }, 10) 
 

 
    function update(g) { 
 
    stat.textContent = g + " out of " + count + " records have been processed"; 
 
    } 
 
}

<input type=number value=10000 id=ac_count> 
 
<button onclick="increment()">CLICK ME</button>

Answer 2

Je ne suggère pas que ce soit une bonne solution, mais cela ne devrait obtenir l'effet que vous recherchez

function increment() { 
    var count = document.getElementById('ac_count').value; //ac_count is the id of the input element 
    var stat = document.createElement("p"); 
    stat.id = "current_status"; 
    stat.innerText = ""; 
    document.body.appendChild(stat); 
    stat.style.display = "block"; 
    updateInnerText(0, count); 
} 

function updateInnerText(number, max){ 
    if(number < max){ 
     stat.innerText = Number(number + 1) + " out of " + count + " records have been processed"; 
     setTimeout(function(){ 
      updateInnerText(number+1, max); 
     }, 500); 
    } 
}