如何停止复制进度条？

Question

The problem that I have over here is that whenever I update the progressbar value with a pos+1, it keeps on creating a new bar while adding the progress to the original progress bar. How do I solve the duplicate problem?

Here's a link to test my code.

var progbar = document.createElement("PROGRESS");
progbar.id = 'progress';
progbar.setAttribute("value", "1");
progbar.setAttribute("max", "10");
document.getElementById("status").appendChild(progbar);
document.getElementById("progress").value = (pos+1);

Answer 1

You example is given more information about the problem you are dealing with.

Basically, you have a single script to create a progressbar and to update the same progressbar. If you want to do both tasks in the same script, you need to do a check to see if the progress bar is already in your page before creating it.

function myFunction(){
    //Check if the progress is already in the page to avoid creating it more than once
    if (!document.getElementById("progress")){
      var x = document.createElement("PROGRESS");

      x.setAttribute("id", "progress");
      x.setAttribute("value", "22");
      x.setAttribute("max", "100");
      document.body.appendChild(x);
    }

    //Not sure where the pos value was taken from... I assumed you wanted to increase the progressbar value by 1
    document.getElementById("progress").value++;
}