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

我已经看了一遍又一遍地写的代码，但似乎找不到问题所在。我想做的是在屏幕上显示一个滑动条，比如生命值/法力值条。 下面是我用来创建条形图的函数：

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]是唯一的条。 基本上，只有最后创建的条才能成功地使用其自己的refresh（）方法。 有人能帮我吗？

---

Thanx every1是否具有对象B刷新功能？您可以尝试将“b”作为全局变量，而不是局部使用它

i、 e

var-b；
函数makeBar（最大值、颜色、位置）{
b=新对象（）；
len=钢筋长度；
//推（b）；不要推这里
b、 指数=len；
b、 地点=地点；
b、 颜色=颜色；
b、 max=max；
b、 val=最大值；
b、 打印=函数（）{
this.place.innerHTML+=“”；
this.container=document.getElementById（'bar'+this.index）；
this.content=document.getElementById（'subBar'+this.index）；
}
b、 刷新=函数（）{
this.content.style.width=（this.val/this.max）*194+“px”；
}
b、 打印（）；
}

---

如果要使用对象b的单个实例，则不要使用数组。直接调用

b.refresh（）

你能做一把小提琴来演示这个问题吗？当我在创建了两个bar实例后使用Chrome的“Inspect Element”并在控制台中分别输入bar[0]和bar[1]时，bar[0]的容器和内容属性分别为div#bar0和div#subBar0，这是页面上的真实元素，但当我将鼠标悬停在上面时，它不会像使用bar那样突出显示元素[1] 。如果我创建了很多条，情况也是如此。只有最后创建的条对象才会这样做。我不知道为什么。。。

bar[0].refresh();

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