How do I make parts of the text from Javascript array displayed at different time?

Question

In my code it is so that if I click the button, 3 numbers are directly showed. But I want the first number to be displayed directly, the second number after 2 seconds and the third number after 3 seconds. Here is the whole source code of my page:

<!DOCTYPE html>
<html>
<head>
<script>
window.onload = function(){
   myFunction();
}
</script>
<script>
function myFunction()
{
 var quotes = [
{text:" <br>    1   <br><br>    2   <br><br>    3   ",},
{text:" <br>    4   <br><br>    5   <br><br>    6   ",},
{text:" <br>    7   <br><br>    8   <br><br>    9   ",},





  ];
      var quote1 = quotes[Math.floor(Math.random() * quotes.length)];
document.getElementById("quote1").innerHTML=
'<p><font size="7">' + quote1.text + '</font></p>';
}
</script>
</head>
<body>
<center>
<div id="quote1"></div>
<br>
<br>
<br>
<br>
<br>
<center>
<a href="#" onclick="myFunction()">Next</a>
</center>
</center>
</body>
</html>

How do I achieve it? P.S. please no Jquery, I use pure Javascript

ZeroWorks · Accepted Answer · 2014-06-01 09:11:49Z

1

This is what you looking for:

<script>
function myFunction()
{
    var o, qt=[
        [1,2,3],
        [4,5,6],
        [7,8,9]];

    o=document.getElementById("quote1");
    o.innerHTML="";
    for(var i=1;i<4;i++)
        o.innerHTML+="<p id=\"quote1_"+i+"\" style=\"font-size: 28pt;\">&nbsp;</p>";

    var q=qt[Math.floor(Math.random() * qt.length)];
    document.getElementById("quote1_1").innerHTML=q[0];
    setTimeout(function() { document.getElementById("quote1_2").innerHTML=q[1]; }, 2000);
    setTimeout(function() { document.getElementById("quote1_3").innerHTML=q[2]; }, 3000);
}

window.onload = function(){
   myFunction();
}
</script>
</head>
<body>
<center>
<div id="quote1"></div>
<br>
<br>
<br>
<br>
<br>
<center>
<a href="#" onclick="myFunction()">Next</a>
</center>
</center>

Testes and working.

Fiddler

answered Jun 1, 2014 at 9:11

ZeroWorks

1,6381 gold badge21 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

keenthinker · Accepted Answer · 2014-06-01 09:27:44Z

Use the window.setTimeout method to achieve the delayed start:

<script>
function myFunction()
{
    var quotes = [
        {text:" <br>    1   <br><br>    2   <br><br>    3   ",},
        {text:" <br>    4   <br><br>    5   <br><br>    6   ",},
        {text:" <br>    7   <br><br>    8   <br><br>    9   ",},
    ];
    // save index in order to decide how much to delay
    var index = Math.floor(Math.random() * quotes.length);
    var quote1 = quotes[index];
    // default timeout is "no delay"
    var timeout = 0;
    // set timeout regarding index
    switch (index) {
        case 0: break;
        case 1: timeout = 2000; break;
        case 2: timeout = 3000; break;
    }
    // update field with delay
    window.setTimeout(function () {
        document.getElementById("quote1").innerHTML='<p><font size="7">' + quote1.text + '</font></p>';
        }, timeout);
}
</script>

<center>
<div id="quote1"></div>
<br>
<center>
<a href="#" onclick="myFunction()">Next</a>
</center>

Collectives™ on Stack Overflow

How do I make parts of the text from Javascript array displayed at different time?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related