如何使用按钮激活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循环以显示每个按钮单击的每个单独结果？

回答

相关问题