javascript - multiple progress bar in javascript

Question

hi am trying to show multiple progress bar . below is the code snipnet

function Progressbar(id){
   this.id=id;
   this.width=0;
   this.progressInterval=0;
   this.showProgress=function(){
     this.width+=20;
     console.log(this.width);
     console.log(this.id);
     document.getElementById(this.id).style.width=this.width + 'px';
     document.getElementById(this.id).innerHTML=this.width + '%';
     if(this.width==100){
       clearTimeout(this.progressInterval);
     }else{
       this.progressInterval=setTimeout(this.showProgress,1000);
     }
   }
}

here id is the id of the progress bar. i used oop since the function showProgress will be called multiple times at same or different time. problem here is that only first time when the function is called am getting the value of this.width as 20 and this.id ="someID" but later i get it as null. Please correct me if am wrong somewhere.

Answer 1

 function Progressbar(id){
  var that=this;
  this.id=id;
  this.width=0;
  this.progressInterval=0;
  this.showProgress=function(){
     that.width+=20;
     document.getElementById(that.id).style.width=that.width + 'px';
     document.getElementById(that.id).innerHTML=that.width + '%';
     if(that.width==100){
        clearTimeout(that.progressInterval);
     }else{
     that.progressInterval=setTimeout(that.showProgress,1000);
   }
 }

}

将this的引用保存在变量中有效