.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?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

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
remorinaCommented:
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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
The Ultimate Tool Kit for Technolgy Solution Provi

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy for valuable how-to assets including sample agreements, checklists, flowcharts, and more!

jetcookCommented:
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
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.