我在制作/更新 HTML 元素时遇到问题。- Javascript

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();
}

所以它可以完美地制作和“打印”条形图。 但是当我尝试使用

bar[0].refresh();

它什么也不做，除非 bar[0] 是唯一的 bar。 基本上，只有最后创建的 bar 才能成功使用它自己的 refresh() 方法。 谁能帮我？ 谢谢大家1

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()。