Jquery on clickクリックすると進行状況バーでタイマが実行されます

Question

小さなゲームを作ろうとしていましたが、最初のステップはうまくいきません。 これは、ボタンをクリックしたときにそうBOX1の下部にあるプログレスバーがあるでしょう私のコード

<div id="box1"> 
     <button id="button">Click Me</button> 
     <div id="progress-bar"></div> 
    </div> 

$('button').click(function() { 
var progressBar = $('#progress-bar'), 
width = 0; 
progressBar.width(width); 
var interval = setInterval(function() { 
    width += 2.5; 
    progressBar.css('width', width + '%'); 
    if (width >= 100) { 
     clearInterval(interval); 
    } 
}, 125) 
}); 

#progress-bar { 
width: 0; 
background: red; 
text-align: center; 
overflow: hidden; 
height: 4px; 
position: absolute; 
bottom: 0px; 
} 
#box1 { 
height: 100px; 
width: 600px; 
position: relative; 
border: 1px solid grey; 
} 

です。 文書を準備するときは機能しますが、.clickを使用すると機能しません。

Answer 1

文書を準備するときは機能しますが、.clickを使用すると機能しません。

$(document).readyがコードをラップすると動作します。これは、実行しようとする前にすべてのjsが完全にロードされるまで、javascriptエンジンが待機するように指示するためです。

$(document).readyがなく、すべてがロードされる前にクリックすると、コンソールエラーが発生します。

F12キーを押して開発者を開き、同じ操作を実行すると、コンソールにエラーが表示されることがあります。