は私がボタンに私のHTMLコードを追加するのに役立つ必要がある、このHTMLコード

Question

を実行するためのボタンを追加助けが必要です。例えば 私はボタンを押したときに、私のコードが開始されます。

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

これらは二つの異なるものです：HTMLコード&スクリプトコード。だから私は彼らのそれぞれで異なる動作をする方が良いと思います。私はあなたがボタンがクリックされたときにプログレスバーを表示したいと思います。私が正しい場合は、のdivタグでプログレスバーのHTMLコードをラップし、なしにその表示スタイルを設定することができます - <div style="display:none">...</div>。次に、すべてのスクリプトを関数e.xに追加します。 startProgressとブロックにdivの表示スタイルを変更するには、関数の先頭に1行のコードを追加します。それは次のようなものでなければなりません：

<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>