Link to a completely random webpage

Question

Link to a completely random webpage

I am looking to add a randomization feature to my collection of 30 HTML pages. When a user clicks on a button, I want one of the 30 pages to be displayed randomly.

I have come across some scripts online that claim to achieve this, but they seem a bit messy and complicated. I'm curious if there is a simpler, cleaner solution out there?

Appreciate any help!

javascript random hyperlink

Answer 1

Answer №1

If your array was named arr, you could easily retrieve a random value with this code snippet:

var value = arr[Math.floor(Math.random() * arr.length)];

This code will generate a random number within the range of 0 to the length of your array.

You can then direct the user to the generated URL using the following JavaScript:

window.location = value;

Testing out the Code

We have created a simple demonstration on JSFiddle: http://jsfiddle.net/ESSAc/1/

In the demo, there is a button with an onclick attribute that executes the function when clicked:

<input type="button" onclick="runme()" value="Click Me!" />

The function defined in the script randomly selects a URL from an array and displays it in an alert box:

function runme() {
    var arr = ["http://www.bbc.co.uk/", "http://www.yahoo.com/", "http://www.stackoverflow.com/"];
    var value = arr[Math.floor(Math.random() * arr.length)];
    alert("Would navigate to : " + value);
    // window.location = value;     // Uncomment this line to actually navigate
}

Answer 2

If your array was named arr, you could easily retrieve a random value with this code snippet:

var value = arr[Math.floor(Math.random() * arr.length)];

This code will generate a random number within the range of 0 to the length of your array.

You can then direct the user to the generated URL using the following JavaScript:

window.location = value;

Testing out the Code

We have created a simple demonstration on JSFiddle: http://jsfiddle.net/ESSAc/1/

In the demo, there is a button with an onclick attribute that executes the function when clicked:

<input type="button" onclick="runme()" value="Click Me!" />

The function defined in the script randomly selects a URL from an array and displays it in an alert box:

function runme() {
    var arr = ["http://www.bbc.co.uk/", "http://www.yahoo.com/", "http://www.stackoverflow.com/"];
    var value = arr[Math.floor(Math.random() * arr.length)];
    alert("Would navigate to : " + value);
    // window.location = value;     // Uncomment this line to actually navigate
}

Answer 3

Answer №2

When approaching this problem, I tend to follow a similar approach:

jQuery('#button').on('click', function() {
    jQuery.getJSON(
        'random-url-generator.php',
        function(response) {
            window.location.href = response.url;
        }
    );
});

It's important to also maintain an array of pages on the server side for easy access.

Answer 4

When approaching this problem, I tend to follow a similar approach:

jQuery('#button').on('click', function() {
    jQuery.getJSON(
        'random-url-generator.php',
        function(response) {
            window.location.href = response.url;
        }
    );
});

It's important to also maintain an array of pages on the server side for easy access.

Link to a completely random webpage

Answer №1

Testing out the Code

Answer №2

Similar questions

What is the best way to handle this unconventional JSON structure?

Guide to showing MySQL data on an HTML page using NodeJS

Utilizing J Query and AJAX to retrieve user details through API without the need for page refresh

Tips for concealing the boundary lines within a Polararea chart utilizing vue-chartjs

Mongo sometimes fails to provide accurate results

npm allows for multiple entry points for modules

The length property of a jQuery array may not always match the actual length of the array

Printing from a Windows computer may sometimes result in a blank page

Is it possible to programmatically close all React Native modal alerts and dialogs?

Angular Group Formation Issue

Switching Tabs When a Button is Clicked

Experiencing problems with geolocation feature policy while working with Ionic framework

There is no response from Ajax

Creating a Vue.js vuetify input that restricts the user to entering only three digits before the decimal point and two digits after the decimal point

"The transparency of the three-js canvas texture is compromised when using the WebGL renderer, unlike the Canvasrenderer which maintains

The property express.json() is not recognized

Looking to transfer the name of the clicked link to a modal in order to execute a PHP/SQL query within the modal window

What is the best way to delete a specific date from local storage using Angular after saving it with a key

How to retrieve attributes of a model from a related model in Sails.js

Implementing an automated numbering system in Typescript to assign a unique id attribute to every object within an array