HTML 요소를 작성/업데이트하는 데 문제가 있습니다 .- 자바 스크립트

Question

나는이 코드를 반복적으로 쓰고 있지만 문제가 무엇인지 찾아 낼 수 없습니다. 내가하려는 것은 헬스/마나 바처럼 화면에 나타나는 슬라이딩 바를 사용하는 것입니다. 바 완벽

function makeBar(max,color,place){ 
    b=new Object(); 
    len=bar.length; 
    bar.push(b); 
    b.index=len; 
    b.place=place; 
    b.color=color; 
    b.max=max; 
    b.val=max; 
    b.print=function(){ 
     this.place.innerHTML+="<div id='bar"+this.index+"' style='display:inline-block;text-align:center;height:40px;width:200px;border:3px outset black;'><div id='subBar"+this.index+"' style='font-size:20pt;height:34px;width:1px;background:"+this.color+";border:3px outset "+this.color+";'></div></div>"; 
     this.container=document.getElementById('bar'+this.index); 
     this.content=document.getElementById('subBar'+this.index); 
    } 
    b.refresh=function(){ 
     this.content.style.width=(this.val/this.max)*194+"px"; 
    } 
    b.print(); 
} 

는 그래서하게하고 '인쇄' 다음은 내가 막대를 만드는 데 사용하고 기능입니다. 그러나 나는 바 [0] 만 줄하지 않는 한 그것은, 아무것도하지 않는

bar[0].refresh(); 

을 사용하려고 할 때. 기본적으로 마지막으로 생성 된 막대 만 자체 refresh() 메서드를 사용할 수 있습니다. 아무도 도와 줄 수 있습니까? 고맙습니다 every1

Answer 1

개체 B 새로 고침 기능이 있습니까? "b"를 로컬 변수로 사용하는 대신 전역 변수로 사용하여 시도 할 수 있습니다. 즉

var b; 
function makeBar(max,color,place){ 
b=new Object(); 
len=bar.length; 
//bar.push(b); don't push here 
b.index=len; 
b.place=place; 
b.color=color; 
b.max=max; 
b.val=max; 
b.print=function(){ 
    this.place.innerHTML+="<div id='bar"+this.index+"' style='display:inline-block;text-align:center;height:40px;width:200px;border:3px outset black;'><div id='subBar"+this.index+"' style='font-size:20pt;height:34px;width:1px;background:"+this.color+";border:3px outset "+this.color+";'></div></div>"; 
    this.container=document.getElementById('bar'+this.index); 
    this.content=document.getElementById('subBar'+this.index); 
} 
b.refresh=function(){ 
    this.content.style.width=(this.val/this.max)*194+"px"; 
} 
b.print(); 
} 

당신이 배열을 사용하지 않는 다음에 b 개체의 단일 인스턴스를 사용하려면

. b.refresh()으로 직접 전화하십시오.