Question

this is my code:

var myarray=[(lots of things)];
var elem=document.getElementById('subtitle');
window.setInterval(function(){
    elem.innerHTML=myarray[Math.round((myarray.length-1)*Math.random())];
},30000);

This works fine, except for the first 30 seconds, nothing happens. I have to wait until it reruns for anything to happen. Can I make it choose one from myarray on page load? Thanks

Answer 1

It has to wait for 30 seconds because when you set a interval, it does not fire it right away! Break it out into a function and call it. If you add the script after the element on the page, you do not have to worry about window.onload or document ready.

<div id="subtitle"></div>
<script>
    (function(){
        var myarray=[(lots of things)];
        var elem=document.getElementById('subtitle');

        function dispNum() {
            elem.innerHTML=myarray[Math.round((myarray.length-1)*Math.random())];
            window.setTimeout(dispNum,30000);
        }    
        dispNum();
    })();
</script>

reunning example: jsFiddle