JavaScriptのカウントダウン機能が何もしないのはなぜですか？

Question

私は、このスクリプトが見つかりました：

<script language="Javascript" TYPE="text/javascript"> 
var container = document.getElementById('dl'); 
var seconds = 10; 
var timer; 
function countdown() { 
    seconds--; 
    if(seconds > 0) { 
     container.innerHTML = 'Please wait <b>'+seconds+'</b> seconds..'; 
    } else { 
     container.innerHTML = '<a href="download.php">Download</a>'; 
     clearInterval(timer); 
    } 
} 
timer = setInterval(countdown, 1000); 
</script> 

をし、私はそれを呼び出すようにしようとしている：

<input type="button" onclick="countdown()" id="dl" value="Download" /> 

が、何も起こりません。私は間違って何をしていますか？私はJavasScriptを有効にしていますが、ボタンをクリックしても何も起こりません。

Answer 1

スクリプトはsetInterval関数呼び出しで起動し、innerHTMLプロパティを持つ要素にカウントダウンを割り当てています。

ボタンに表示する場合は、要素のvalueプロパティを使用し、動作を変更する必要があります（リンクはそこでは機能しません）。ボタンの代わりにspanまたはdiv要素を使用します。

Answer 2

何かのもの。まず、スクリプトがあなたのhtmlの前に宣言されている場合、その要素がまだレンダリングされていないので、おそらくgetElementById呼び出しでエラーが発生しています。 dom要素にアクセスするときは、DOMがロードされた後、または（望ましくは）ドキュメントのonloadイベントにバインドされた関数でスクリプトを実行する必要があります。

あなたの他の問題は、setIntervalを呼び出すと、そのコードが評価されるとすぐにカウントダウンが開始されますが、ボタンをクリックするまでカウントダウンを開始しないことです。代わりにこれを試してみてください：

<div id="dl"></div> 
<input type="button" onclick="setInterval(countdown, 1000);" id="dl" value="Download" /> 

<script language="Javascript" TYPE="text/javascript"> 
var container = document.getElementById('dl'); 
var seconds = 10; 
var timer; 
function countdown() { 
    seconds--; 
    if(seconds > 0) { 
     container.innerHTML = 'Please wait <b>'+seconds+'</b> seconds..'; 
    } else { 
     container.innerHTML = '<a href="download.php">Download</a>'; 
     clearInterval(timer); 
    } 
} 
</script> 

注これは偉大なコードではありませんが、あなたのページまたは他に何あなたがやっている程度の詳細の欠如を考えると、これは、少なくともあなたが軌道に乗る必要があること。

Answer 3

入力したコードをdivタグに入れて固定して、クリックすると「ダウンロード」ボタンをクリックしてタイマーを開始します。

<div id="dl"> 
    <input type="button" onclick="setInterval(countdown, 1000);" id="dl" value="Download" /> 
</div> 
<script language="Javascript" TYPE="text/javascript"> 
    var container = document.getElementById('dl'); 
    var seconds = 10; 
    var timer; 
    function countdown() { 
     seconds--; 
     if(seconds > 0) { 
      container.innerHTML = 'Please wait <b>'+seconds+'</b> seconds..'; 
     } else { 
      container.innerHTML = '<a href="File or Page Location">Download File</a>'; 
      clearInterval(timer); 
     } 
    } 
</script>