Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

HTML & CSS NEED HELP! Attempting to create hyperlink for randomly generated statements

benchild1996

New Coder
Hi I'm super new to code and have ventured upon it as I am attempting to make a portfolio website for my graphic design work and experience.

Attempting to go the extra mile over the majority of design graduate portfolio websites, I've setup an interactive opening page to the site that randomly generates and displays a list of set out statements upon entering the site and refreshing thus.

What I want is for the statement (no matter which is displayed) to work as a hyper link into the main navigation page of the site. Currently I am able to attach a hyper link to a single statement but unfortunately not all of them.

Would anyone be willing to help me out?

Here is the present code I am working with:

Code:
<meta charset="utf-8">
<title>Random Text</title>

  <div id="quote"><p>The correct use of soap</p></div>
  <script>
    (function(randomtext) {
      var quotes = [
        {
          text: "May I rock on Tommy?",
        },
        {
          text: "Global Style?",
        },
        {
          text: "White text on a black background",
        },
        {
          text: "Thats not a ram. Thats a sacrificial lamb",
        },
        {
          text: "The six o'clock horses",
        },
        {
          text: "Radically autonomous",
        },
        {
          text: "Anticipatory Typography",
        },
        {
          text: "Two cool rock chicks listening to Neu",
        },
        {
          text: "In the mind of the bourgeois reader",
        },
        {
          text: "Courstide seats at the Yankees?",
        },
        {
          text: "Self-obsessed And sexxee",
        },
        {
          text: "Here comes a regular",
        },
        {
          text: "Nowhere is near my home",
        },
        {
          text: "South american folk songs",
        },
        {
          text: "The kid with the replacable head",
        },
        {
          text: "High tension wire",
        },
        {
          text: "A different kind of tension",
        },
        {
          text: "Nine million rainy days",
        },
        {
          text: "Up the down escalator",
        },
        {
          text: "Concerto in X minor",
        },
        {
          text: "The Biz Vs. The Nuge",
        },
        {
          text: "B-Boys making with the freak freak",
        },
        {
          text: "Flowers of romance",
        },
        {
          text: "Love like anthrax",
        },
        {
          text: "A man with a good car",
        },
        {
          text: "Apache (Man On Horseback)",
        },
        {
          text: "The correct use of soap",
        },
      ];
      var quote = quotes[Math.floor(Math.random() * quotes.length)];
      document.getElementById("quote").innerHTML =
        '<p>' + quote.text + '</p>';
    })();
  </script>
<meta charset="utf-8">
<title>Random Text</title>

ANY help will be much appreciated! Thankyou!
 
Last edited:
JavaScript:
<meta charset="utf-8">
<title>Random Text</title>
  <div id="quote"><p>The correct use of soap</p></div>
  <script>
    (function(randomtext) {
      var quotes = [
        {
          text: "Compile the world!",
          url: "link1"
        },
        {
          text: "Digitalize the Moon!",
          url:  "link2"
        },
        {
          text: "Bytecode the ocean!",
          url:  "link3"
        }
      ];
      var idx = Math.floor(Math.random() * quotes.length);
      var quote = quotes[idx].text;
      var url = quotes[idx].url;
      document.getElementById("quote").innerHTML = '<p><a href="' + url + '">' + quote + '</a></p>';
    })();
  </script>
 
Last edited:
If you want all of the quotes to appear you need a loop.

JavaScript:
for(let i = 0; i < quotes.length; i++){}

Wrap everything in the loop from idx to getElementById

And also, innerHTML should have += instead of = sign
 
Last edited:
This is a multiline version, I tested it with JSFiddle:

JavaScript:
<meta charset="utf-8">
<title>Random Text</title>
<div id="quote"><p>The correct use of soap</p></div>
<script>
  (function(randomtext) {
    var quotes = [
      {
        text: "Compile the world!",
        url: "link1"
      },
      {
        text: "Digitalize the Moon!",
        url:  "link2"
      },
      {
        text: "Bytecode the ocean!",
        url:  "link3"
      }
    ];

    var randList = []
    for (var idx = 0; idx < quotes.length; idx++)
      randList.splice(Math.floor(Math.random () * (randList.length + 1)), 0, quotes[idx]);

    document.getElementById("quote").innerHTML = '';
    for (var idx = 0; idx < randList.length; idx++){
      var quote = randList[idx].text;
      var url = randList[idx].url;
      document.getElementById("quote").innerHTML += '<p><a href="' + url + '">' + quote + '</a></p>';
    }
  })();
</script>
 

New Threads

Latest posts

Buy us a coffee!

Back
Top Bottom