Ways to shuffle elements on a webpage randomly?

Question

Ways to shuffle elements on a webpage randomly?

Currently, I am teaching myself HTML, CSS, and JavaScript and experimenting with building something interesting.

I have a vision of creating 100 clickable images/links (essentially buttons featuring the same image). I want a certain percentage of these buttons to direct users to one page, while the rest lead to another page. The user would not know this until they click on a button.

Every time the page is reloaded, I desire the placement of the images/links to be randomized.

Although I am aware that I can generate random numbers in JavaScript using Math.random(), I am struggling to implement the concept described above. As I believe in learning by doing, I wondered if anyone could provide me with some guidance.

javascript html css

Answer 1

Answer №1

document.addEventListener('DOMContentLoaded', function() {
    for(let j=0;j<50;j++)
        GenerateButtons();
});

function GenerateButtons()
{
    let button = document.createElement("BUTTON");   // Creating a new <button> element
    button.innerHTML = "Test your fate";                   // Adding text

    button.onclick = OpenLink;
    document.body.appendChild(button);  
}

function OpenLink()
{
    let redirectPage = "";
    let randomNum = Math.random();
    if(randomNum % 2 == 0)
        redirectPage = "https://www.example.com/page1";
    else
        redirectPage = "https://www.example.com/page2";
    window.location.replace(redirectPage);
}

GenerateButtons() will generate a collection of buttons on the page, and each time a button is clicked, OpenLink() will randomly select where to redirect the user.

Here are some resources I used to help with this solution: https://www.example.com/page1 https://www.example.com/page2

Answer 2

document.addEventListener('DOMContentLoaded', function() {
    for(let j=0;j<50;j++)
        GenerateButtons();
});

function GenerateButtons()
{
    let button = document.createElement("BUTTON");   // Creating a new <button> element
    button.innerHTML = "Test your fate";                   // Adding text

    button.onclick = OpenLink;
    document.body.appendChild(button);  
}

function OpenLink()
{
    let redirectPage = "";
    let randomNum = Math.random();
    if(randomNum % 2 == 0)
        redirectPage = "https://www.example.com/page1";
    else
        redirectPage = "https://www.example.com/page2";
    window.location.replace(redirectPage);
}

GenerateButtons() will generate a collection of buttons on the page, and each time a button is clicked, OpenLink() will randomly select where to redirect the user.

Here are some resources I used to help with this solution: https://www.example.com/page1 https://www.example.com/page2

Ways to shuffle elements on a webpage randomly?

Answer №1

Similar questions

Error: You forgot to close the parenthesis after the argument list / there are duplicate items

Maintain the image's aspect ratio by setting the width equal to the height when the height is

Is create-react-native-app experiencing functionality issues?

What is the best way to alter the background of a div when hovering over a button in a separate div?

Ways to enhance the Response in Opine (Deno framework)

Ways to have form inputs dynamically increase in value and then send the data via a post request

Unlock the full potential of Angular Material Framework by leveraging Custom Palettes

Tips for uploading a photo in Selenium Webdriver using Java when the input type is not 'File'

Unit testing is encountering issues due to errors with objects not being accepted as a React child component

The instance cannot be accessed by ES6 class methods

Unable to submit the form to the PHP script

What can I do to resolve the problem with td border

Console builds successfully, but encountering issues with building in Docker

Converting a JavaScript map into an array with ES6: A step-by-step guide

Generate a consolidated dataframe by parsing through various HTML files

Obtain the selected option's value using Angular

Styling limitations encountered when using lang="scss" with scoped css

How can I utilize passed in parameters in Meteor React?

Encountered an issue during deployment with Vercel: The command "npm run build" terminated with exit code 1 while deploying a Next.js web application

Issue with .submit() not submitting form after setTimeout timer runs out