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

[benchild1996]

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:

<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!

 

[Malcolm]

Hi there,

Welcome to Code Forum!

Please edit your post and wrap your code within our Code BBCode feature. You can view more here, https://codeforum.org/threads/how-to-post-your-code-into-threads.183/

 

[ivan.moony]

<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>

 

[darioK]

If you want all of the quotes to appear you need a loop.

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

 

[ivan.moony]

This is a multiline version, I tested it with JSFiddle:

<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>