CODEWITHSUNDEEP
javascripthtmlloopsfor-loopbutton
Miguel Valle
Miguel Valle

Reputation: 1

How do I use a button to activate a For loop to show each individual results per button click?

I've been trying to figure this out for about 3 hours with multiple failures and my code end up just reverting back to this point. 

<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>

Currently all the numbers are appearing under the button, What I need to do however is that when I click on btnOutput, the first number of the for loop (0) is displayed. When I click on btnOutput again, the second number of the for loop is displayed (1). So every time I click on btnOutput the loop runs once, until it can't run any longer (when i=11)

Didn't mention: A for-loop is necessary for what I am doing.

Upvotes: 0

Views: 369

Answers (3)

Sudheer K
Sudheer K

Reputation: 1282

Actually you don't need a for loop for this. Just assign a global variable and a global limit and then append incremented values to 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>

Upvotes: 0

Rajesh
Rajesh

Reputation: 24925

Since you wish to append values on click, using a loop is not required. Just capture the event and append to the necessary element.

Also, since you are only trying to update text of element, you should try using textContent instead of innerHTML.

  • innerHTML: This will process passed string to HTML and then update html of the necessary element.
  • textContent: This will not do any processing. It will just update the text content of element.

// 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>

Upvotes: 1

gurvinder372
gurvinder372

Reputation: 68393

You don't need a for-loop, just increment the number and display a new number.

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>

Upvotes: 1

Related Questions