generating random number 10 times

Question

I am practicing with while loops for an assignment and trying to use Math.random to generate a loop with 10 iterations, so I get a random number every time. Instead I keep getting the same number listed 10 times in a row. Not sure what I'm doing wrong here? Using in the HTML to display all the results at once.

<script type="text/javascript">
    var x = 0;
    function showResults() {
    var randomNum = Math.floor(Math.random() * 999) + 1;
    loopOutput = "";
        while (x < 10) {
        x++;
       document.getElementById("loopResults").innerHTML += "<p>Our answer: " + x + ". " + randomNum + "</p>";
    }} //end function showResults()
</script>

FYI, my output is coming out like this: Our answer: 1. 654 Our answer: 2. 654 Our answer: 3. 654 Our answer: 4. 654 Our answer: 5. 654 Our answer: 6. 654 Our answer: 7. 654 Our answer: 8. 654 Our answer: 9. 654 Our answer: 10. 654 — Robin D., May 15 '16 at 19:24
You will need to calculate the random number *inside* the loop. — Madara's Ghost, May 15 '16 at 19:24
@RobinD. Its usually better to update the question itself with additional information rather than putting it into a comment. — Jeremy J Starcher, May 15 '16 at 19:28
Ah, thanks to you both! Still getting used to how to use this site. — Robin D., May 15 '16 at 19:28
Related: [Generating random whole numbers in JavaScript in a specific range?](http://stackoverflow.com/questions/1527803/generating-random-whole-numbers-in-javascript-in-a-specific-range) — Yogi, May 15 '16 at 19:30

score 0 · Answer 1 · answered May 15 '16 at 19:27

Just move the calculation of the random number into the loop:

var x = 0;
function showResults() {
loopOutput = "";
    while (x < 10) {
    var randomNum = Math.floor(Math.random() * 999) + 1;
    document.getElementById("loopResults").innerHTML += "<p>Our answer: " + x + ". " + randomNum + "</p>";
    x++;
}} //end function showResults()

score 0 · Answer 2 · answered May 15 '16 at 19:27

<script type="text/javascript">
    var x = 0;
    function showResults() {
    loopOutput = "";
        while (x < 10) {
        var randomNum = Math.floor(Math.random() * 999) + 1;
        x++;
       document.getElementById("loopResults").innerHTML += "<p>Our answer: " + x + ". " + randomNum + "</p>";
    }} //end function showResults()
</script>

score 0 · Answer 3 · answered May 15 '16 at 19:28

The random number is only generated once when the function is called, but you need to generate number 10 times, so you put

var randomNum = Math.floor(Math.random() * 999) + 1;

inside while loop, at the end it will look like this:

<script type="text/javascript">
var x = 0;
function showResults() {
loopOutput = "";
    while (x < 10) {
    var randomNum = Math.floor(Math.random() * 999) + 1;
    x++;
   document.getElementById("loopResults").innerHTML += "<p>Our answer: " + x + ". " + randomNum + "</p>";
}} //end function showResults()

score 0 · Answer 4 · answered May 15 '16 at 19:29

You're generating only one random number. Generate a random inside the loop!
Inside the loop you're constantly calling a DOM parser to lookup for your element, instead use your variable loopOutput for HTML string concatenation
Place your variables within the scope of your function:

Instead:

function showResults() {

  var x = 0,
      loopOutput = "";

  while (x < 10) {
    x++;
    var randomNum = Math.floor(Math.random() * 999) + 1;
    loopOutput +=  "<p>Our answer: " + x + ". " + randomNum + "</p>";
  }

  // Append HTML only once!
  document.getElementById("loopResults").innerHTML = loopOutput;

}

showResults();

<div id="loopResults"></div>

generating random number 10 times

4 Answers4