Javascript-进度条不工作

我有一个进度条，我让我的js通过

document.getElementsByTagName（progressbar）[num]

获取它的值。我在多个函数中都有这样的功能，但是当其中一个进度条被删除时，其他进度条不会继续，因为设置了

num

。。。我该如何解决这个问题

function plantTree()
{
    if(water > 10){
        var doSome = doSom;
        doSom++;
        water -= 10;
        var div = document.getElementById("plantATree");
        div.innerHTML = "<progress val='0' max='100'></progress>";
        var i = 0;
        var inte = setInterval(function(){
            document.getElementsByTagName("progress")[doSome].value += 5;
            i++;
            if(i >= 20){
                window.clearInterval(inte);
            }
        },1000);
        var inter = setInterval(function(){
            var progVal = document.getElementsByTagName("progress")[doSome].value;
            if (progVal >= 100){
                statusTwoUpdate("You have finished Planting a Tree...", "wood += 5");
                window.clearInterval(inter);
                div.innerHTML = "Plant a Tree";
                doSom--;
            }
        },500);
    }else{
        statusTwoUpdate("You tried and failed...", "water -= 6");
    }
}

函数plantTree（）
{
如果（水>10）{
var doSome=doSom；
doSom++；
水-=10；
var div=document.getElementById（“plantATree”）；
div.innerHTML=“”；
var i=0；
var inte=setInterval（函数（）{
document.getElementsByTagName（“progress”）[doSome].value+=5；
i++；
如果（i>=20）{
窗口清除间隔（inte）；
}
},1000);
var inter=setInterval（函数（）{
var progVal=document.getElementsByTagName（“progress”）[doSome].value；
如果（progVal>=100）{
statusTwoUpdate（“您已完成植树……”，“木材+=5”）；
窗口。清除间隔（inter）；
div.innerHTML=“种植一棵树”；
多森——；
}
},500);
}否则{
statusTwoUpdate（“您尝试并失败了…”，“水-=6”）；
}
}

---

编辑：这里有一个与我使用的所有javascript类似的示例：

您可以尝试向每个进度条元素添加唯一的ID

而不是：

div.innerHTML = "<progress val='0' max='100'></progress>";

div.innerHTML=“”；

使用：

div.innerHTML=''；

---

当引用它时，不要使用

document.getElementsByTagName（“progress”）[doSome]

，而是使用

document.getElementById（“progress”+doSome）

你的水函数/变量集在哪里？修复现有代码肯定是一项相当大的工作。您可能需要考虑使用和拥有一个JS变量，它是进度条的数组。这样，您就不必每次都在文档中获取它们。当你删除一棵树时，你实际上做了

doSom--

，这是错误的。

div.innerHTML = '<progress id="progress' + doSome + '" val='0' max='100'></progress>';