Ich brauche Hilfe hinzufügen einer Schaltfläche, um diesen HTML-Code

Question

Ich brauche Hilfe, um meinen HTML-Code zu einer Schaltfläche hinzufügen. Zum Beispiel, wenn ich die Taste drücke, startet mein Code.

function progressBarSim(al) { 
 
    var bar = document.getElementById('progressBar'); 
 
    var status = document.getElementById('status'); 
 
    status.innerHTML = al + "%"; 
 
    bar.value = al; 
 
    al++; 
 
    var sim = setTimeout("progressBarSim(" + al + ")", 300); 
 
    if (al == 100) { 
 
     status.innerHTML = "100%"; 
 
     bar.value = 100; 
 
     clearTimeout(sim); 
 
     var finalMessage = document.getElementById('finalMessage'); 
 
     finalMessage.innerHTML = "Process is complete"; 
 
    } 
 
} 
 
var amountLoaded = 0; 
 
progressBarSim(amountLoaded);

<progress id="progressBar" value="0" max="100" style="width:300px;"></progress> 
 
<span id="status"></span> 
 
<h1 id="finalMessage"></h1>

Answer 1

Das sind zwei verschiedene Dinge: HTML-Code & Code-Scripting. Deshalb denke ich, dass es besser ist, sich mit jedem von ihnen anders zu verhalten. Ich schätze, du möchtest den Fortschrittsbalken anzeigen, wenn auf eine Schaltfläche geklickt wird. Wenn ich Recht habe, dann können Sie Fortschrittsbalken HTML-Code mit einem div Tag wickeln und legen Sie seine Anzeige Stil keine-<div style="display:none">...</div>. Dann fügen Sie alle Skripte in einer Funktion e.x hinzu. startProgress und fügen Sie eine Zeile Code oben auf Ihrer Funktion zu ändern div Anzeige Stil zu Block. Es muss in etwa so aussehen:

<div id="divProgbar" style="display:none"> 
    <progress id="progressBar" value="0" max="100" style="width:300px;"></progress> <span id="status"></span> <h1 id="finalMessage"></h1> 
</div> 
<script> 
function startProgress(){ 
document.getElementById('divProgbar').style.display='block'; 
function progressBarSim(al) { 
    var bar = document.getElementById('progressBar'); 
    var status = document.getElementById('status'); 
    status.innerHTML = al+"%"; 
    bar.value = al; 
    al++; 
var sim = setTimeout("progressBarSim("+al+")",300); 
if(al == 100){ 
    status.innerHTML = "100%"; 
    bar.value = 100; 
    clearTimeout(sim); 
    var finalMessage = document.getElementById('finalMessage'); 
    finalMessage.innerHTML = "Process is complete"; 
} 
} 
var amountLoaded = 0; 
progressBarSim(amountLoaded); 
} 
<script> 
<button onclick="javascript:startProgress(); return false;">Start progress</button>