ボタンをクリックして、個々の結果をボタンごとに表示するForループをアクティブにするにはどうすればよいですか？

私はこのことを複数の失敗で約3時間把握しようとしていましたが、私のコードはこの時点まで戻ってしまいました。ボタンをクリックして、個々の結果をボタンごとに表示するForループをアクティブにするにはどうすればよいですか？

<html> 
 

 
<head> 
 
    <title>Learning</title> 
 
    <script type="text/javascript"> 
 
    function theMath(userOutput) { 
 
     document.getElementById("userOutput").innerHTML = userOutput 
 
    } 
 
    </script> 
 
</head> 
 

 
<body> 
 
    <p id="userOutput"></p> 
 

 
    <p> Counting from one to ten</p> 
 
    <input type="button" id="btnOutput" value="Add a number!" /> 
 
    <p></p> 
 
    <script> 
 
    var strOutput = ""; 
 
    var i; 
 
    for (i = 0; i <= 10; i++) { 
 
     strOutput = " " + i; 
 
     document.write(strOutput) 
 
    } 
 
    </script> 
 
</body> 
 

 
</html>

現在、すべての数字がボタンの下に表示されている、私はしかし、行う必要があることは、私はbtnOutputをクリックすると、forループの最初の数（0）が表示されていることです。もう一度btnOutputをクリックすると、2番目のforループが表示されます（1）。だから、私はbtnOutputをクリックするたびにループが一度実行され、それ以上実行できなくなるまで（i = 11のとき）

言及していませんでした：forループは私がしていることに必要です。

出典

2017-10-13 Miguel Valle

クリックに値を追加したいので、ループを使用する必要はありません。イベントをキャプチャして必要な要素に追加するだけです。

また、要素のテキストのみを更新しようとしているため、innerHTMLの代わりにtextContentを試してください。

innerHTML：これは、渡された文字列をHTMLに処理し、必要な要素のhtmlを更新します。
textContent：これは処理されません。要素のテキスト内容を更新するだけです。

// To avoid bleeding to global scope. 
 
(function(){ 
 
    var count = 0; 
 
    
 
    function theMath(userOutput) { 
 
    document.getElementById("userOutput").textContent += userOutput 
 
    } 
 
    
 
    document.getElementById('btnOutput').addEventListener('click', function(){ 
 
    if(++count <= 10){ 
 
     theMath(count) 
 
    } 
 
    }) 
 
})()

<p id="userOutput"></p> 
 

 
<p> Counting from one to ten</p> 
 
<input type="button" id="btnOutput" value="Add a number!" /> 
 
<p></p>

出典

2017-10-13 05:59:12 Rajesh

にインクリメント値を追加、実際に私のコードであることが必要です。私はまた、ボタンと機能を使用する必要があります。 –

あなただけの数をインクリメントし、新しい番号を表示し、forループは必要ありません。

var i = 1; 
 
var maxValue = 11; 
 

 
document.getElementById("btnOutput").addEventListener("click", function() { 
 
    if (i < maxValue) { 
 
    document.getElementById("userOutput").innerHTML += (i++) + "<br>"; 
 
    } 
 
});

<html> 
 

 
<head> 
 
    <title>Learning</title> 
 
</head> 
 

 
<body> 
 
    <p id="userOutput"></p> 
 

 
    <p> Counting from one to ten</p> 
 
    <input type="button" id="btnOutput" value="Add a number!" /> 
 
    <p></p> 
 
</body> 
 

 
</html>

出典

2017-10-13 05:59:24 gurvinder372

残念ながら、このインスタンスではforループを使用する必要がありますが、実際には自分のコードに含める必要があります。私はまた、ボタンと機能を使用する必要があります。 –

実はあなたは、このためのループのためには必要ありません。残念ながら、私はこの例では、forループを使用する必要がありますだけでグローバル変数とグローバル制限を割り当て、innerHTML

<html> 
<head> 
<title>Learning</title> 
<script type="text/javascript"> 
    var i = 1; 
    var maximum = 11; 
    function addnum(){ 
     if (i<maximum) { 
      document.getElementById("userOutput").innerHTML +=" "+i++; 
     } 

} 
</script> 
</head> 
<body> 
<p id="userOutput"></p> 

<p> Counting from one to ten</p> 
<input type ="button" 
     id = "btnOutput" 
     onclick="addnum()" 
     value = "Add a number!"/> 
<p></p> 

</body> 
</html>

出典

2017-10-13 06:15:08

ボタンをクリックして、個々の結果をボタンごとに表示するForループをアクティブにするにはどうすればよいですか？

答えて

関連する問題