.innerHTML not updating?

Hi,

I am having a curious problem. I am trying to update the innerHTML of an element on my page dynamically, through a for-loop. However, it simply does not update the content... here's how it's setup:

HTML element...

script:
for 0 to dynamic value
    add/replace percentage text to element
next

However, when i go into the page, i just get the original "Loading..." message in my element, until it ends the loop, at which point it says "Loading... 100% - Completed" ...

Hopefully someone will be able to help me... here's the code:


HTML Element(s):

<div id="scale" style="position: absolute; width: 300px; background-color: #ccc; border: 1px solid blue; padding: 10px;"><div id="bar" style="background-color:blue; height:4px; width:0px;"></div><div id="progress">Loading...</div></div>


JAVASCRIPT:

window.onload=function(){
var bar = document.getElementById("bar");
var scale = document.getElementById("scale");
var prog = document.getElementById("progress");
var len=1000;
for(i=0;i<=len;i++)
{
bar.style.width = parseInt(300*i/len)+"px";
prog.innerHTML="Loading... " + parseInt(100*i/len)+ "%";
}

}

again... all i get from this is @Loading...@, then @Loading... 100%@... nothing updates dynamically, for example, for 10000 lines in the for loop, my screen will just say @Loading...@, no bar, no nothing, for about 10 seconds, and then it changes to @loading... 100%@... 

thanks.

Open in new window

LVL 10
MaxOvrdrv2Asked:
Who is Participating?

[Webinar] Streamline your web hosting managementRegister Today

x
 
remorinaConnect With a Mentor Commented:
Actually you need to get rid of the for loop, since it will finish the loop before actually updating the innerhtml and also to use setInterval

Try the code below

<html>
<head>
<script>

function test(){
var bar = document.getElementById("bar");
var scale = document.getElementById("scale");
var prog = document.getElementById("progress");

if (count <= len) {
count += 1;
bar.style.width = parseInt(300*count/len)+"px";
prog.innerHTML="Loading... " + parseInt(100*count/len)+ "%";
}
 else {
    clearInterval(ID);
   }
}
var count=1;
var ID;
var len=1000;
window.onload = function() {
  ID = setInterval("test();", 10);
}
    </script>
</head>
<body>
    <div id="scale" style="position: absolute; width: 300px; background-color: #ccc;
        border: 1px solid blue; padding: 10px;">
        <div id="bar" style="background-color: blue; height: 4px; width: 0px;">
        </div>
        <div id="progress">
            Loading...</div>
    </div>
</body>
</html>

Open in new window

0
 
RobinSoftware EngineerCommented:
I think it just goes too fast. The browser gets no chance to update the divs.

Try the following code to see the update visible changing:
function testProgress(i){
   var bar = document.getElementById("bar"); 
   var scale = document.getElementById("scale"); 
   var prog = document.getElementById("progress"); 
   var len=5;
   //for(i=0;i<=len;i++) { 
      bar.style.width = parseInt(300*i/len)+"px"; 
      prog.innerHTML="Loading... " + parseInt(100*i/len)+ "%"; 
   //}
   i++;
   if(i<=len) {
      setTimeout('testProgress('+i+')',100);
   }
} 

window.onload=testProgress(0);

Open in new window

0
 
MaxOvrdrv2Author Commented:
Nope... still nothing... now i just get Loading... 0%, which stays there, for an insane amount of time... and then it shows 100%...

example, for 233 as the number, it takes 23 seconds to load. But the progress still doesn't update.
0
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

 
jetcookConnect With a Mentor Commented:
Because "for" occupied the CPU, browser does not have the opportunity to update the page.
window.onload = function() {
    if (!this.i) {
        // cache variables for performance
        this.i = 0;
        this.bar = document.getElementById("bar");
        this.scale = document.getElementById("scale");
        this.prog = document.getElementById("progress");
        this.len = 1000;
    }

    bar.style.width = parseInt(300 * i / len) + "px";
    prog.innerHTML = "Loading... " + parseInt(100 * i / len) + "%";
    i += 1;

    if(i <= len) {
        // repeat call self
        // to change speed modify 2nd param
        setTimeout(arguments.callee, 0);
    }
    else {
        // avoid memory leak
        i = bar = scale = prog = len = null;
    }
}

Open in new window

0
 
MaxOvrdrv2Author Commented:
this does work... however, the problem is that my clients are complaining about load times (example, for 233 (to put you in context, the dynamic number is equivalent to markers on a google map), takes aproximately 8 seconds to load)... and they are already complaining about that... but if i use your function above, loading 1000 markers would take a set and finite time of 20 seconds.
0
 
MaxOvrdrv2Author Commented:
is there not a way to update faster? both solutions above take about 20 seconds... or is it an "it would take as much time to load if you were in the for loop, the only difference is that with this at least your progress bar is updating" situation??

thanks for the help !!
0
 
remorinaCommented:
Hi MaxOvrDrv2,
Yes indeed you can increase the speed by increasing the increment

in the line count += 1; you can change it to count += 2; which would actually double the speed
You can event set fractions, for example count += 1.5;


<html>
<head>
<script>

function test(){
var bar = document.getElementById("bar");
var scale = document.getElementById("scale");
var prog = document.getElementById("progress");

if (count <= len) {
count += 2;
bar.style.width = parseInt(300*count/len)+"px";
prog.innerHTML="Loading... " + parseInt(100*count/len)+ "%";
}
 else {
    clearInterval(ID);
   }
}
var count=1;
var ID;
var len=1000;
window.onload = function() {
  ID = setInterval("test();", 10);
}
    </script>
</head>
<body>
    <div id="scale" style="position: absolute; width: 300px; background-color: #ccc;
        border: 1px solid blue; padding: 10px;">
        <div id="bar" style="background-color: blue; height: 4px; width: 0px;">
        </div>
        <div id="progress">
            Loading...</div>
    </div>
</body>
</html>

Open in new window

0
 
MaxOvrdrv2Author Commented:
i cannot do that, because that would then skip specific information that needs to be displayed... for context, the random number is the length of an array, which contains markers for googlemap... therefore, if i increase the step, markers will be skipped.
0
 
remorinaCommented:
In this case the only thing you can modify is the  setInterval("test();", 10);
You can set the interval to 1 or even 0 instead of 10, but these are only milliseconds, so it won't have that much effect
0
 
MaxOvrdrv2Author Commented:
ok so it is a situation of @it won't matter because it would take just as long in a for loop@ ?
0
 
remorinaCommented:
Yes I guess so, of course the for loop might sound faster since it doesn't actually update and runs totally in memory, but if it was to achieve the same behaviour it would have taken as long since there are no any delays applied now after removing the setInterval
0
 
MaxOvrdrv2Author Commented:
Since you both gave good solutions, Remorina for the concept and first answer, and jetcook for the simplicity of the recursion, fastest speed, and handling memory, i am splitting points equally. Thanks to the both of you.
0
All Courses

From novice to tech pro — start learning today.