-1

forループを含むJavaScript関数を使用してWebページにカウントダウンを表示しようとしています。私はそれを呼び出す正しい方法が何であるか分からない。
私のページ内のようなものを表示することになっています：JavaScript for loopをHTMLで表示

数：19
数：18
数：ように15
...と：17
数：16
カウント。

これまでのところ、「カウント：19」しか表示されません。別のバリエーションでは、カウントが表示されるようになりましたが、ボタンをクリックするとページが消え（白に）、カウントが表示されます。ページにはもう少しHTMLとCSSがありますが、関連性のない部分は切り捨てました。

私が間違っていることを誰かに教えてもらえますか？

ありがとうございました！ここに私のコードは次のとおりです。

function forLoopCountDown() { 
 
    for (var i = 0; i < 20; i++) { 
 
    document.getElementById("count").innerHTML = "count: " + i + "<br>"; 
 
    } 
 
}

<html lang="en"> 
 

 
<head> 
 
    <title>Count Down</title> 
 

 
</head> 
 

 
<body> 
 
    <header> 
 
    <h1>Count Down Page</h1> 
 
    </header> 
 
    <h2>Click on the button below to do a count down</h2> 
 
    <button onclick="forLoopCountDown()">count down 1 using for loop</button> 
 
    <p id="count">&nbsp;</p> 
 
</body> 
 

 
</html>

出典

2016-10-09 marie1485

、あなたの代わりに文字列を追加する必要があります。 –

のみ19が現れる理由はそうあるため、あなたのカウンターの

for (var i = 0; i < 20; i++)

で、我々は0で始まり、そして i == 19まで iに1を追加しますループが実行されるたびに <p id="count"> </p>を新しい値で上書きするので、最終値は count: 19

です

だから、あなたがダウンしてインクリメントする必要はなく、アップ

for (var i = 19; i >= 0; i--)

また、あなたは新しいpタグを毎回作成したいです。

function forLoopCountDown() { 
 
    for (var i = 19; i > 0; i--) { 
 
    var para = document.createElement("p"); 
 
    var node = document.createTextNode("Count: " + i); 
 
    para.appendChild(node); 
 
    document.body.appendChild(para); 
 
    } 
 
}

<html lang="en"> 
 

 
<head> 
 
    <title>Count Down</title> 
 

 
</head> 
 

 
<body> 
 
    <header> 
 
    <h1>Count Down Page</h1> 
 
    </header> 
 
    <h2>Click on the button below to do a count down</h2> 
 
    <button onclick="forLoopCountDown()">count down 1 using for loop</button> 
 
    <p id="count">&nbsp;</p> 
 
</body> 
 

 
</html>

出典

2016-10-09 23:28:23 davidhu2000

を使用でき

var para = document.createElement("p"); 
var node = document.createTextNode("Count: " + i); 
para.appendChild(node);

、

document.getElementById("count").innerHTML += "count: " + i + "<br>";

代わりの

document.getElementById("count").innerHTML = "count: " + i + "<br>";

この方法、あなたは文句を言わないのinnerHTMLのpropertを上書きすべての繰り返し。

はまたuがあなたが各秒後にあなたの関数を呼び出すためのsetInterval関数を使用する必要がi--

出典

2016-10-09 23:29:27

を使用し、カウントアップされています。

var i = 0 
setInterval(function() 
{ 
    for (i = 0; i < 20; i++) { 
    document.getElementById("count").innerHTML + = "count: " + i + "<br>"; 
    } 
},1000)

私は、コードをテストしていませんが、あなたはあなたの関数が正しい得れば、のsetInterval関数は毎秒

出典

2016-10-09 23:32:32

閉じるが、これは毎秒forループを実行し、決して終了しない。 – Howzieky

ええ、問題に応じて変数を使用したり、setintervalを決して呼び出さないようにするには、stop intervalを使用することができます。ちょうどあなたのように:) –

があなたのコード行を変更しようとした後、実行を確認します...

document.getElementById("count").innerHTML = "count: " + i + "<br>";

...この

document.getElementById("count").innerHTML += "count: " + i + "<br>";

出典

2016-10-09 23:32:45

これは私の答えの正確な複製です:) –

ああ、ええ、それを見ていない：p –

のように見えるようにあなたはsetIntervalを使用する必要がある、とすべて一緒forループを取り除きます。カウンタを設定し、setIntervalコールごとにカウンタをインクリメントし、カウンタが高過ぎると間隔を終了します。

DOWNを20から0までカウントする場合は、i++でカウントアップする代わりにi--を使用する必要があります。

<header> 
    <h1>Count Down Page</h1> 
</header> 
<h2>Click on the button below to do a count down</h2> 
<button id="timerBtn">count down 1 using for loop</button> 
<p id="count"></p> 

document.getElementById("timerBtn").addEventListener("click", function() { 
    var i = 20; 
    var interval = setInterval(function(){ 
    i--; 
    document.getElementById("count").innerHTML += "count: " + i + "<br>"; 
    if (i == 0) 
    { 
     clearInterval(interval) 
    } 
    }, 250) 
})

JSFiddle：https://jsfiddle.net/e6p9u0ks/1/

EDIT：遅延が不要で、かつループのために必要とされる場合：

アイデアをゼロにカウントダウン、その後、i = 20でカウンタを開始することです。上記のHTMLを使用しますが、次のようにJSを置き換える：

document.getElementById("timerBtn").addEventListener("click", function() { 
    for (var i = 20; i > 0; i--) //Take note of this line 
    { 
    document.getElementById("count").innerHTML += "count: " + i + "<br>"; 
    } 
})

JSFiddle：あなたは常に「カウント」要素の値を上書きしているhttps://jsfiddle.net/e6p9u0ks/2/

出典

2016-10-09 23:36:05 Howzieky

これは私がループのために使用する必要が宿題のためのものであることを忘れています。 – marie1485

遅延が必要ない場合、それは事を単純化します。私は一瞬で編集します。 – Howzieky

@ marie1485申し訳ありませんが、編集が完了しました – Howzieky

JavaScript for loopをHTMLで表示

答えて

EDIT：遅延が不要で、かつループのために必要とされる場合：

関連する問題