Как остановить дублирование индикатора выполнения?

Question

Проблема, с которой я сталкиваюсь здесь, заключается в том, что всякий раз, когда я обновляю значение progressbar с помощью pos + 1, он продолжает создавать новую полосу, добавляя прогресс в исходный индикатор выполнения. Как решить дублируемую проблему?

Вот link, чтобы проверить мой код.

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

Вам, например, предоставляется дополнительная информация о проблеме, с которой вы имеете дело.

В принципе, у вас есть один скрипт для создания панели прогресса и обновления одного и того же уровня производительности. Если вы хотите выполнять обе задачи в том же скрипте, вам нужно сделать чек, чтобы увидеть, пока индикатор выполнения уже находится на вашей странице, прежде чем создавать его.

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++; 
}