Javascript-進度欄不起作用

Question

我有一個進度條，我的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");
    }
}

編輯：這就像我使用的所有JavaScript： http : //hastebin.com/gucuwaxema.coffee

Answer 1

您可以嘗試向每個進度欄元素添加唯一的ID。

代替：

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

采用：

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

並且在引用它時，請使用document.getElementById('progress' + doSome)代替document.getElementsByTagName("progress")[doSome]