Write sequence of random numbers in javascript to paragraph

Question

Really a newbie question but I can't seem to find the answer. I need to have this html file show a bunch of random numbers, separated by 1 second intervals. For some reason (maybe obvious) it is only showing me the last one unless I have 1 alert after each random number generated. How can I correct this?

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
var randomnumber
var message

function placePossibleWinner()
{
randomnumber=Math.floor(Math.random()*11);
message="Teste ";
message=message.concat(randomnumber.toString());
document.getElementById("WINNER").innerHTML=message;
//alert(".")
}
</script>
</head>

<body>
<script type="text/javascript">
function runDraw()
{
    var i=1
    alert("start")
    while (i<20)
  {
        setTimeout("placePossibleWinner()",1000)
        i++
  }
}
</script>

<h1>H Draw</h1>

<p id="WINNER">Draw</p>
<p></p>
<button onclick="runDraw()">Get me winner!</button>

</body>
</html>

Thanks in advance for any answers/comments.

Side note: Don't pass strings to `setTimeout`, it uses `eval`! Pass functions. `setTimeout(placePossibleWinner, 1000)` — gen_Eric, Jul 24 '12 at 19:05
I know. I just gave it a try in case that was the problem. Thanks! — jpsfer, Jul 24 '12 at 23:39

score 2 · Accepted Answer · answered Jul 24 '12 at 19:11

The problem is all your setTimeouts are being triggered at the same time. Adding alerts pauses the JavaScript execution, so you see each number. Without that, after 1 second, all 19 setTimeouts run (one after another) and you just see one number (the screen is updated so fast, you just see one).

Try using setInterval instead.

function runDraw() {
    var i = 1;
    var interval = setInterval(function(){
        if(i < 20){
            placePossibleWinner();
            i++;
        }
        else{
            clearInterval(interval);
        }
    }, 1000);
}

This will run the function once every second, until i is 20, then it will clear the interval.

score 2 · Answer 2 · answered Jul 24 '12 at 19:14

I believe you want setInterval instead. using setTimeout in a loop will just queue up 20 calls immediately and they will all fire at once 1 second later. Also, you are setting the innerHTML of the p which will overwrite any previous text.

function placePossibleWinner() {
    // add a var here, implicit global
    var randomnumber=Math.floor(Math.random()*11);

    // add a var here, implicit global
    message="Teste " + randomnumber + '\n'; // new line

    document.getElementById("WINNER").innerHTML += message; // concat, don't assign
}

function runDraw() {
    var counter = 1;
    var intervalID = setInterval(function () {
        if (counter < 20) {
            placePossibleWinner();
            counter++;
        } else {
           clearInterval(intervalID);
        }
    }, 1000);
}

score 1 · Answer 3 · edited Jul 24 '12 at 19:26

You are resetting your message in your functions and you are calling placePossibleWinner() the wrong way... you want to use setInterval. Below is a modification of your html/javascript

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
    var randomnumber;
    var message = "Teste ";
    var timesCalled = 0;
    var funtionPointer;

    function placePossibleWinner()
    {
        timesCalled++;
        randomnumber=Math.floor(Math.random()*11);
        message=message.concat(randomnumber.toString());
        document.getElementById("WINNER").innerHTML=message;
        if (timesCalled > 20)
        {
         clearInterval(functionPointer);
        }
     }
</script>
</head>

<body>
<script type="text/javascript">
    function runDraw()
    {
        var i=1
        alert("start")
        functionPointer = setInterval(placePossibleWinner,1000)
    }
</script>

<h1>H Draw</h1>

<p id="WINNER">Draw</p>
<p></p>
<button onclick="runDraw()">Get me winner!</button>

</body>
</html>

Don't pass strings to `setInterval`, it uses `eval`! Pass functions. `setInterval(placePossibleWinner,1000)` — gen_Eric, Jul 24 '12 at 19:21

score 0 · Answer 4 · edited May 23 '17 at 12:21

0

To start with,

setTimeout("placePossibleWinner()",1000)

should be

setTimeout(placePossibleWinner,1000)

The parameter to setTimeput should be a reference to a function. See JavaScript,setTimeout

edited May 23 '17 at 12:21

Community

1
1

answered Jul 24 '12 at 19:06

Nivas

18,126
4
62
76

Write sequence of random numbers in javascript to paragraph

4 Answers4