Generating a random link through Javascript/HTML

Question

I am trying to create a script that allows me to display a hyperlink that redirects the user to a random url selected out of four sites. So far I have created an array for the sites, and a function that attempts to generate the random url. For my purpose it is important for the output ("Click to go to a random site") is not a button, but a simple (clickable) string.

When running the code I get a reference error "link is not defined (on line 18)". I thought that I had defined link in the code with var link = 'http://' + links[randIdx];, so I am not entirely sure why I am getting this error and how to fix it.

Anyone that could take a look at my code to see where I have made a mistake and how I could fix it?

<a href="javascript:openSite()">Click to go to a random site</a>
<script>
function openSite() {
var links = [
              "google.com",
              "youtube.com",
              "reddit.com",
              "apple.com"]

            openSite = function() {
              // get a random number between 0 and the number of links
              var randIdx = Math.random() * links.length;
              // round it, so it can be used as array index
              randIdx = parseInt(randIdx, 10);
              // construct the link to be opened
              var link = 'http://' + links[randIdx];
              };
              
    return link;
    
    document.getElementById("link").innerHTML = openSite();
}
</script>

why is there openSite() function again inside the openSite() function? — Mohit Bhardwaj, Jun 10 '16 at 15:21
It was a probably a byproduct of me using different methods to get the code to work — John Vars, Jun 10 '16 at 17:01

score 3 · Answer 1 · answered Jun 10 '16 at 15:30

3

Here's a simple way to do it.

<script>
    var sites = [
        'http://www.google.com',
        'http://www.stackoverflow.com',
        'http://www.example.com',
        'http://www.youtube.com'
    ];

    function randomSite() {
        var i = parseInt(Math.random() * sites.length);
        location.href = sites[i];
    }
</script>
<a href="#" onclick="randomSite();">Random</a>

answered Jun 10 '16 at 15:30

ManoDestra

6,325
6
26
50

This link is used for opening only if someone clicks on the hypertext string `Random`, right? Is there a way to create the full `...` directly when loading the site? – buhtz Mar 22 '22 at 16:21
1

Sure. Just create the anchor using `const a = document.createElement('a');`, then set the onclick event to randomSite like `a.onclick = randomSite;`. And then finally add it to the document wherever you need it, like `document.body.appendChild(a);`, or append to a specific element that you've already ascertained. It's up to yourself. – ManoDestra Mar 22 '22 at 19:04

score 2 · Accepted Answer · answered Jun 10 '16 at 15:22

2

<a href="javascript:openSite()">Click to go to a random site</a>
<script>
var links = [
              "google.com",
              "youtube.com",
              "reddit.com",
              "apple.com"]

           var openSite = function() {
              // get a random number between 0 and the number of links
              var randIdx = Math.random() * links.length;
              // round it, so it can be used as array index
              randIdx = parseInt(randIdx, 10);
              // construct the link to be opened
              var link = 'http://' + links[randIdx];

     return link;
    };
</script>

answered Jun 10 '16 at 15:22

Mohit Bhardwaj

9,650
3
37
64

1

For me ManoDestra's answer worked, and this one did not! – Katinka Hesselink Jun 24 '17 at 06:58
1

@KatinkaHesselink I think you're right. My answer may not work as it is. Manodestra's answer works as it is. – Mohit Bhardwaj Jun 25 '17 at 13:43

Gerardo Furtado · Answer 3 · 2016-06-10T15:29:08.147

Here is the code:

var links = [
          "google.com",
          "youtube.com",
          "reddit.com",
          "apple.com"]

function openSite() {
    // get a random number between 0 and the number of links
    var randIdx = Math.random() * links.length;
    // round it, so it can be used as array index
    randIdx = parseInt(randIdx, 10);
    // construct the link to be opened
    var link = 'http://' + links[randIdx];
        return link;
};

document.getElementById("link").innerHTML = openSite();

Here is the fiddle: https://jsfiddle.net/gerardofurtado/90vycqyy/1/

Generating a random link through Javascript/HTML

3 Answers3

Linked