如何使用按鈕激活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時，會顯示for循環的第二個數字（1）。因此，每次我點擊btnOutput循環運行一次，直到它不能再運行（當我= 11）

沒有提及：for循環是我所做的必要的。

來源

2017-10-13 Miguel Valle

由於您希望在點擊時附加值，因此不需要使用循環。只需捕捉事件並追加到必要的元素即可。

此外，由於您只是試圖更新元素的文本，因此您應該嘗試使用textContent而不是innerHTML。

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循環，它實際上是要求在我的代碼。我也需要使用一個按鈕和功能。 –

你並不需要一個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循環以顯示每個按鈕單擊的每個單獨結果？

回答

相關問題