How do I get this random link chooser to make it a link not just plain text

It works but only as plain text I need it as a clickable link

// Declare an array with links as strings
var links = ["", "", "", ""];

// Define a function to display a random link
function displayRandomLink() {
  // Generate a random index within the range of the array
  var randomIndex = Math.random() * links.length;

  // Round down the random index to an integer
  randomIndex = Math.floor(randomIndex);

  // Get the element at the random index from the array
  var randomLink = links[randomIndex];

  // Get the HTML element to display the link
  var linkElement = document.getElementById("random-link");

  // Set the text and href attribute of the element to the random link
  linkElement.textContent = randomLink;
  linkElement.href = "http://" + randomLink;
<h1>Random Link Generator</h1>
<p>Click the button below to generate and display a random link.</p>
<button onclick="displayRandomLink()">Generate</button>
<p id="random-link"></p>

You need to change the element from paragraph to anchor.

So here:

Change to an anchor element

<a id="random-link" href="" target="_blank">Random Link</a>

And you need to update your javascript function too

function displayRandomLink() {

  var randomLink = links[randomIndex];
  var linkElement = document.getElementById("random-link");

  // Set the href attribute and text content
  linkElement.href = "http://" + randomLink;
  linkElement.textContent = randomLink;

With this the button will turn the text into a clickable hyperlink. The target="_blank" attribute in the <a> tag ensures that the link opens in a new tab.

1 Like

It works really well now Thanks. Is there a way to change the display name I have a bunch of Google docs I need to be messing with in this and having a custom display name will be so much better than random nonsense huge link.

You’ll need to modify your JavaScript to display a custom name instead of the URL. It’s better if you define an array since it’s multiple links.

Something like this:

// You declare an array with objects containing links and their display names
var links = [
  { url: "", name: "Google" },
  { url: "", name: "YouTube" },
  { url: "", name: "Replit" },
  { url: "", name: "Idk" }

function displayRandomLink() {
  var randomIndex = Math.floor(Math.random() * links.length);
  var randomLink = links[randomIndex];

  var linkElement = document.getElementById("random-link");

  // Set the href attribute to the URL and text content to the custom name
  linkElement.href = "http://" + randomLink.url;
  linkElement.textContent =;

Thank you this works perfectly

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.