ユーザーの入力によるJavaScriptのカウントダウン

こんにちは、私は入力から数字を1秒ごとにカウントダウンする簡単なアプリを作ろうとしています。誰かが私のコードplsで間違っていることを私に説明することはできますか？私はsetTimeOutとcountDown関数のさまざまな組み合わせを試しましたが、最高の設定では、アプリケーションは入力（#number）から0までの数字をただちに表示することができました。私は開始,,私がクリックした後も、コンソールがするたびにクリアされている理由を知らない」ここユーザーの入力によるJavaScriptのカウントダウン

<body> 


    <form> 
     <h1>Countdown:</h1> 
     <h3>Set time</h3> 
     <input id="number" type="text"> 
     <button id="start">Start</button> 
    </form> 
    <div id="area"><p id="text1"></p></div> 
<script> 
     window.onload = init; 
     function init(){ 
      var start = document.getElementById("start"); 
      start.onclick = finalCountDown; 
     } 

     function finalCountDown() {setTimeout(countDown,1000);} 
     function countDown(){ 
      console.log("works"); 
      var number = document.getElementById("number"); 
      var value = number.value; 
      var area = document.getElementById("text1"); 
      for (var i = value; i>0;i--){ 
      area.innerHTML+=i; 
      } 
     } 

    </script> 
</body>

出典

2017-04-24 Patryk Karpiński

あなたは私はそれが理由連結 –

トライエリアのかもしれないと思う何のエラーが発生している次のあなたのような何かをarea.innerText...を置き換える必要があります。 innerHTML - = - Numumber（i） –

まだHTMLは何も表示していません。コンソールにエラーはありません。ちょうど何も画面に表示されません –

いくつかの問題;。

、ボタンに使用すると、属性タイプ=を設定する必要があります『ボタンを』またはそれはあなたのフォームを送信しようとします。あなたのsetTimeoutで
あなたがcountDown関数を参照するが、それを呼び出すことはありません。あなたはsetTimeout(countDown(), 1000);を記述する必要があります。

これを行う

window.onload = init; 
 
function init(){ 
 
    var start = document.getElementById("start"); 
 
    start.onclick = finalCountDown; 
 
} 
 

 
function finalCountDown() {setTimeout(countDown(),1000);} 
 
function countDown(){ 
 
    console.log("works"); 
 
    var number = document.getElementById("number"); 
 
    var value = number.value; 
 
    var area = document.getElementById("text1"); 
 
    for (var i = value; i>0;i--){ 
 
    area.innerHTML+=i; 
 
    } 
 
}

<form> 
 
    <h1>Countdown:</h1> 
 
    <h3>Set time</h3> 
 
    <input id="number" type="text"> 
 
    <button type="button" id="start">Start</button> 
 
</form> 
 
<div id="area"><p id="text1"></p></div>

コードからエラーを削除します。今、あなたは、単に次のように望ましい結果を得るために周りにいくつかのことを変更する必要があります。

window.onload = init; 
 
function init(){ 
 
    var start = document.getElementById("start"); 
 
    start.onclick = finalCountDown; 
 
} 
 

 
function finalCountDown() {setTimeout(countDown(),1000);} 
 

 
function countDown(){ 
 
    console.log("works"); 
 
    var number = document.getElementById("number"); 
 
    var value = parseInt(number.value, 10); 
 
    var area = document.getElementById("text1"); 
 
    var interval = setInterval(function() { 
 
     if (value > -1) { 
 
      area.innerText = value; 
 
      value--; 
 
     } else { 
 
      clearInterval(interval); 
 
     } 
 
    }, 1000); 
 
}

<form> 
 
    <h1>Countdown:</h1> 
 
    <h3>Set time</h3> 
 
    <input id="number" type="text"> 
 
    <button type="button" id="start">Start</button> 
 
</form> 
 
<div id="area"><p id="text1"></p></div>

私はそれが始まる前に、あなたがsetTimeoutメソッドによって引き起こされる1秒の遅延に興味があるかどうかわからないんだけどそれがちょうど間違いであったかどうか。私は後者を想定しています。もしその関数を削除すれば呼び出すことができます。 countDownに置き換えます。あなたのコメントを受けて

は、代わりに<p>要素を取り、その.innerTextを更新するには、<ul>で<p>を置き換えることができます。私は<ul>により文脈的な<id>属性を与え、var area = ...を、新しい<ul>を参照する変数に置き換えます。

var li = document.createElement("LI"); 
li.innerText = i; 
ul.appendChild(li);

全体像のためのスニペット：

window.onload = init; 
 
function init(){ 
 
    var start = document.getElementById("start"); 
 
    start.onclick = finalCountDown; 
 
} 
 

 
function finalCountDown() {setTimeout(countDown(),1000);} 
 

 
function countDown(){ 
 
    var value = parseInt(document.getElementById("number").value, 10); 
 
    var ul = document.getElementById("ul"); 
 
    var interval = setInterval(function() { 
 
     if (value > -1) { 
 
      var li = document.createElement("LI"); 
 
      li.innerText = value; 
 
      ul.appendChild(li); 
 
      value--; 
 
     } else { 
 
      clearInterval(interval); 
 
     } 
 
    }, 1000); 
 
}

<form> 
 
    <h1>Countdown:</h1> 
 
    <h3>Set time</h3> 
 
    <input id="number" type="text"> 
 
    <button type="button" id="start">Start</button> 
 
</form> 
 
<ul id="ul"></ul>

出典

2017-04-24 21:44:08

ありがとうございました！私はもう1つの質問をすることができます - もしidがすべての数字（10-> 0）を次々に書いたり、リストに書いていたら？ –

ようこそ。私はPCに戻ったときにそれを私の答えに加えます。答えを受け入れてください。 –

ユーザーの入力によるJavaScriptのカウントダウン

答えて

関連する問題