Javascript - Progress Bar not Working

Question

I have a progress bar, and I have my js getting the value of it with document.getElementsByTagName(progressbar)[num]. I have this in multiple functions, but when one of the progress bars are removed, the others don't continue because num is set... How do I fix this?

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

EDIT: Here is a like to all the javascript I use: http://hastebin.com/gucuwaxema.coffee

It would certainly be quite a bit of work to fix your code as it stands. You may want to consider using [jQuery](http://jquery.org) and have a JS variable which is an array of your progress bar. That way you do not have to go get them in your document each time. When you remove a tree, you actually do `doSom--` which is wrong. — Alexis Wilke, May 23 '15 at 02:24

score 0 · Answer 1 · answered May 23 '15 at 05:21

You can try adding a unique ID to each of the progress bar element.

Instead of:

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

Use:

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

And when referencing to it, instead of document.getElementsByTagName("progress")[doSome], use document.getElementById('progress' + doSome)

Javascript - Progress Bar not Working

1 Answers1