Randomly change a letter in every 60 seconds

Question

I am trying to find a method to have a single letter change every 5 seconds. I have the random part done but cannot work out how to change it every 5 seconds. Here is what I have put together so far, I am hoping someone can tell me where I am going wrong.

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript">
        function randomString(Length)
        {
            var text = "";
            var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
            for( var i=0; i < Length; i++ )
                text += possible.charAt(Math.floor(Math.random() * possible.length));
            return text;
        }
        function ChangingRandomString(Length)
        {
            setInterval(function(){
                return randomString(Length);
            },5000);
        }
    </script>
</head>
<body>
<div id="wrap">
<p>Random Changing Letter : <script type="text/javascript">ChangingRandomString(1);</script></p>
<p>Random Static Letter : <script type="text/javascript">document.write(randomString(1));</script></p>
</div>
</body>
</html>

In the ideal world I am looking to also make the changing letter fade in and out as well for those who like a challenge :-)

Thanks in advance for any help.

@PeterAronZentai I guess you got me wrong. I'm not even that good with javascript, I'm not saying this isn't a challenge for me. And I didn't downvote this, because I think the question is fine. Simply, StackOverflow isn't a place for "challenges". — Hugo Sousa, Jul 14 '14 at 13:19
your `ChangingRandomString` don't return anything, possible solution add _span_ and changing it text — Grundy, Jul 14 '14 at 13:24

score 0 · Accepted Answer · edited May 23 '17 at 11:57

My suggestion:

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript">
            function randomString(Length)
            {
                var text = "";
                var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
                for( var i=0; i < Length; i++ )
                    text += possible.charAt(Math.floor(Math.random() * possible.length));
                return text;
            }
            function ChangingRandomString(Length)
            {
                setInterval(function(){
                    document.getElementById("random").innerHTML = randomString(Length);
                },5000);
            }
        </script>
    </head>
    <body>
        <div id="wrap">
        <p>Random Changing Letter : <span id="random"></span></p>
        <p>Random Static Letter : <script type="text/javascript">document.write(randomString(1));</script></p>
        </div>
    </body>
    <script>ChangingRandomString(1)</script>
</html>

Your code wasn't working because you weren't writing anywhere just calling ChangingRandomString. It simply returned something, but it wasn't being written.

This way, I used a span, that is rewritten every 5 seconds, and called the script in the end of the body tag.

For the fade thing, I really suggest you to use jQuery that facilitates that kind of things. You can also take a look here.

Thanks for your help and advice on that. I now see where I went wrong. — TheBritishGeek, Jul 14 '14 at 15:42

Randomly change a letter in every 60 seconds

1 Answers1