How can I make randomly generated result (javascript) be a hyperlink?

Question

I've made a random brand generator where you click a button and it returns a brand. I'd like it if each of the brand names that were generated, when clicked, opened the brands website in a new tab. I'm not sure if this is possible, and if it is, whether it should be done in HTML or javascript. Thanks for your help!

HTML

  <!doctype html>
  <html>

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Brandomiser</title>
    <link href='https://fonts.googleapis.com/css?family=Martel:900' rel='stylesheet' type='text/css'>
    <link href="main.css" rel="stylesheet" type="text/css">
    <link href="/downloads/favicon.ico" />
  </head>

  <body>
  <div class="row">
    <div id="bar" class="col-12 col-t-12 col-d-12 col-b-12">
      <p id="brand">Brandomiser</p>
    </div>
  </div>

  <div class="row">
    <div class="col-12 col-t-12 col-d-12 col-b-12">
      <h1 id="myRandomDiv"></h1>
    </div>
  </div>

  <div class="row">
    <div id="buttonmiddle" class="col-12 col-t-12 col-d-12 col-b-12">
      <button type="button" id="myButton">Hit me.</button>
    </div>
  </div>
  <script src="thing.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  </body> 
  </html>

Javascript

var randomStrings = [
    "Endsleigh",
    "Colgate",
    "Shell",
    "Tesco",
    "Swatch",
    "Vanish",
  ];

  var randomDiv = document.getElementById("myRandomDiv");

  document.getElementById("myButton").addEventListener("click", generate);

  function generate() {
    randomIndex = Math.ceil((Math.random() * randomStrings.length - 1));
    newText = randomStrings[randomIndex];
    randomDiv.innerHTML = newText;
  }

  generate();

score 2 · Answer 1 · answered Nov 22 '15 at 19:06

2

use

randomDiv.innerHTML = "<a target='_blank' href='http://example.com/"+newText+"'>"+newText"</a>";

answered Nov 22 '15 at 19:06

SBoys3.com

424
3
12

score 1 · Answer 2 · answered Nov 22 '15 at 18:59

you're looking for window.open(url):

  function generate() {
    randomIndex = Math.ceil((Math.random() * randomStrings.length - 1));
    newText = randomStrings[randomIndex];
    window.open('http://blabla.com/' + newText);
  }

also Math.random returns a float in the range [0,1) (never includes 1) so you can simply your code abit:

randomIndex = Math.floor(Math.random() * randomStrings.length);

Danny Fardy Jhonston Bermúdez · Answer 3 · 2015-11-22T19:17:56.223

Use the proper way to create an element in Javascript:

document.createElement("a")

Something like this:

var randomStrings = [
  "Endsleigh",
  "Colgate",
  "Shell",
  "Tesco",
  "Swatch",
  "Vanish",
];

var randomDiv = document.getElementById("myRandomDiv");

document.getElementById("myButton").addEventListener("click", generate);

function generate() {
  randomIndex = Math.ceil((Math.random() * randomStrings.length - 1));
  newText = randomStrings[randomIndex];

  randomDiv.innerHTML = ""; // Clean the previous content.
  var link = document.createElement("a"); // Create the <a> tag.
  link.href = "http://" + newText + ".com/"; // Set the href attribute for the new link.
  link.target = "_blank"; // Set the target attribute for the new link.
  link.innerText = newText; // Set the content.
  randomDiv.appendChild(link); // Append your new <a> tag to the randomDiv.
}

generate();

<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Brandomiser</title>
  <link href='https://fonts.googleapis.com/css?family=Martel:900' rel='stylesheet' type='text/css'>
  <!--<link href="main.css" rel="stylesheet" type="text/css">-->
  <link href="/downloads/favicon.ico" />
</head>

<body>
  <div class="row">
    <div id="bar" class="col-12 col-t-12 col-d-12 col-b-12">
      <p id="brand">Brandomiser</p>
    </div>
  </div>

  <div class="row">
    <div class="col-12 col-t-12 col-d-12 col-b-12">
      <h1 id="myRandomDiv"></h1>
    </div>
  </div>

  <div class="row">
    <div id="buttonmiddle" class="col-12 col-t-12 col-d-12 col-b-12">
      <button type="button" id="myButton">Hit me.</button>
    </div>
  </div>
  <!--<script src="thing.js"></script>-->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</body>

</html>

How can I make randomly generated result (javascript) be a hyperlink?

3 Answers3