Javascript - 进度条不起作用答案

【问题标题】：Javascript - Progress Bar not WorkingJavascript - 进度条不起作用
【发布时间】：2015-05-13 16:37:39
【问题描述】：

我有一个进度条，我的 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

【问题讨论】：

你的水函数/变量集在哪里？
按原样修复代码肯定需要相当多的工作。您可能需要考虑使用jQuery 并拥有一个 JS 变量，它是您的进度条数组。这样您就不必每次都将它们放入您的文档中。当你移除一棵树时，你实际上是在做doSom--，这是错误的。

标签： javascript progress-bar

【解决方案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]

【讨论】：