How do I display randomly an array without click on the button?

Question

I'd like to have a page with a button and when I click the button the text should be shown. the text is taken from different arrays randomly with Javascript. Everything works in my project except one thing: On the first load of the page I see no text just the button. How do I make so that one of the arrays is randomly chosen and displayed on the fist page load (without click on the button)

<!DOCTYPE html>
<html>

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

Thank you!

Just trigger the button on page load, or call myFunction(). — Popnoodles
– Popnoodles, Commented May 31, 2014 at 13:46

kidwon · Accepted Answer · 2014-05-31 13:46:58Z

2

Call it on page load.

window.onload = function(){
   myFunction();
}

answered May 31, 2014 at 13:46

kidwon

4,5325 gold badges31 silver badges46 bronze badges

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

Comments

pavel · Accepted Answer · 2014-05-31 13:48:14Z

1

Call the function after page is loaded.

<body onload="myFunction()">

answered May 31, 2014 at 13:48

pavel

27.3k11 gold badges47 silver badges63 bronze badges

Comments

Axel Amthor · Accepted Answer · 2014-05-31 13:57:17Z

put the entire stuff in to a function at the end of the doc:

<!DOCTYPE html>
<html>
<head>

</head>

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

<script>
var randomQuote = function() {
    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>';
 };
 randomQuote();

</script>
</html>

The last line will execute the function immediately.

Collectives™ on Stack Overflow

How do I display randomly an array without click on the button?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related