0

I am trying to create a simple script the user clicks a button and a progress bar slowly fills to 100% (I know exciting right?)

So I have this snippet set up as my timer:

this.updateBar = setInterval(function () { that.update(); }, 50);

The problem I am having is writing the method properly so that the progress bar slowly fills up. I am quite obviously having logic errors but I'm in so deep I can't see them. This is what I have that obviously is incomplete but doesn't even get me off the ground to start.

ProgressBar.prototype.update = function () {
   if(this.bar.style.width == "0%")
   {
       this.bar.style.width = "20%";
   }

}

Thank You!

1
  • Your update function either needs to be passed a percentage value or your ProgressBar object needs to be set for a particular total time and know what the start time and current time is. That's how these things usually work. As you have it now, there's no information for the update() function to know how far it should draw the progress.
    – jfriend00
    Apr 18, 2013 at 2:12

2 Answers 2

1

Inside your ProgressBar constructor, add:

this.progress = 0;

Then change the update function to:

ProgressBar.prototype.update = function () {
    this.progress++; 
    this.bar.style.width = this.progress + "%";
}
1
  • I forgot to add a check to stop the whole thing after reaching 100%. You should definitely do that!
    – bfavaretto
    Apr 18, 2013 at 2:26
0

You have a good start. 50 milliseconds for the update interval is quite quick in my opinion, I would recommend something closer to 500 milliseconds. But for your function, something incremental like this may work better:

ProgressBar.prototype.update = function () {
  current = this.bar.style.width.split('%')[0];
  if(current !>= 100) {
    current = current + 20;
    this.bar.style.width = current + "%";
  }
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.