如何使用按钮激活 For 循环以显示每次按钮单击的每个单独的结果？答案

【问题标题】：How do I use a button to activate a For loop to show each individual results per button click?如何使用按钮激活 For 循环以显示每次按钮单击的每个单独的结果？
【发布时间】：2017-10-13 05:51:58
【问题描述】：

我已经尝试了大约 3 个小时来解决这个问题，但出现了多次失败，而我的代码最终只是回到了这一点。

<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 循环都会运行一次，直到它不能再运行（当 i=11 时）

没有提到：我正在做的事情需要一个 for 循环。

【问题讨论】：

标签： javascript html loops for-loop button

【解决方案1】：

您不需要 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>

【讨论】：

不幸的是，在这种情况下我必须使用 for 循环，它实际上需要在我的代码中。我还需要使用按钮和功能。

【解决方案2】：

由于您希望在点击时附加值，因此不需要使用循环。只需捕获事件并附加到必要的元素。

另外，由于您只是尝试更新元素的文本，您应该尝试使用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>

【讨论】：

不幸的是，在这种情况下我必须使用 for 循环，它实际上需要在我的代码中。我还需要使用按钮和功能。

【解决方案3】：

实际上，您不需要 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>

【讨论】：