Add hyperlink support to QotD script-CodePudding

The script I currently use for "showing quotes of the day" on button press lacks one feature: Link support => Allowing the quotes to be clicked, leading to a webpage.

Just adding a usual "href" doesn't work it just shows up as text.

Is there another way ?

const arrayOfQuotes = [{
    'quote': 'Every person that you meet knows something you do not  learn from them - H Jackson'
  },
  {
    'quote': 'Assume – to make an ASS out of U n ME  Vermutung sei die Mutter des Untergangs'
  },
  {
    'quote': 'Neither a borrower nor a lender be – Polonius Hamlet'
  },
  {
    'quote': 'I am alive not my fault so I have to try and get by as best I can without hurting anybody - Leo Tolstoy'
  },
  {
    'quote': 'There is always a chance – as long as one can – think – Basil of Bakerstreet'
  },
  {
    'quote': 'Bleib dem treu was dich besonders macht  dann folgt das Gute und Schöne im Leben hinterher'
  },
  {
    'quote': 'There is no such thing as karma That only exists in a fair world and we both know the world is anything but fair'
  },
  {
    'quote': 'Invention requires an excited mind Execution a calm one'
  },
  {
    'quote': 'Ein Mensch ohne Phantasie ist wie ein Vogel ohne Flügel - Wilhelm Raabe'
  },
  {
    'quote': 'As soon as you give up hope – everything is lost  '
  },
  {
    'quote': 'You are only truly alone if you choose to be alone'
  },
  {
    'quote': 'Data!data!data! I cannnot make bricks without clay  - ACDoyle'
  },
  {
    'quote': 'Nothing ever goes away until it teaches us what we need to know - Perma Chodron'
  },
  {
    'quote': 'We attract what we are'
  },
  {
    'quote': 'The person who broke you cannot be the one to fix you'
  },
  {
    'quote': 'There is only one way to avoid criticism   Do nothing say nothing  and be nothing – Aristotle'
  },
  {
    'quote': 'I know nothing except the fact of my ignorance - Aristotle'
  },
  {
    'quote': 'If you are absent during my struggle  do not expect to be present during my success – Will Smith'
  },
  {
    'quote': 'It\'s not Music - It\'s magic'
  },
  {
    'quote': 'Sometimes - indeed - there is such a discrepancy between the genius and his human qualities that one has to ask oneself whether a little less talent might not have been better - C. G. Jung'
  },
];

function generateQuote() {
  const random = Number.parseInt(Math.random() * arrayOfQuotes.length   1);
  document.querySelector('#quoteOutput').textContent = `\"${arrayOfQuotes[random].quote}\"`;
}

div {
  text-align: left;
}

h1 {
  font-size: 11px;
  font-family: Arial;
}

button {
  width: 128px;
  height: 28px;
  background-color: white;
  color: black;
}

{
  font-size: 11px;
}

button:hover {
  background-color: white;
}

</style></head><body>

<div><button onclick="generateQuote();">QuoteOfTheDay</button>
  <p id="quoteOutput">
</div>

CodePudding user response：

As I stated in my comment above, instead of textContent try innerHTML. Also, I'm not sure why you add 1 in arrayOfQuotes.length 1

const arrayOfQuotes = [{
    'quote': '<a href="#">sample link</a> Every person that you meet knows something you do not  learn from them - H Jackson'
  },
  {
    'quote': '<a href="#">sample link</a> Assume – to make an ASS out of U n ME  Vermutung sei die Mutter des Untergangs'
  },
  {
    'quote': '<a href="#">sample link</a> Neither a borrower nor a lender be – Polonius Hamlet'
  },
  {
    'quote': '<a href="#">sample link</a> I am alive not my fault so I have to try and get by as best I can without hurting anybody - Leo Tolstoy'
  },
  {
    'quote': '<a href="#">sample link</a> There is always a chance – as long as one can – think – Basil of Bakerstreet'
  },
  {
    'quote': '<a href="#">sample link</a> Bleib dem treu was dich besonders macht  dann folgt das Gute und Schöne im Leben hinterher'
  },
  {
    'quote': '<a href="#">sample link</a> There is no such thing as karma That only exists in a fair world and we both know the world is anything but fair'
  },
  {
    'quote': '<a href="#">sample link</a> Invention requires an excited mind Execution a calm one'
  },
  {
    'quote': '<a href="#">sample link</a> Ein Mensch ohne Phantasie ist wie ein Vogel ohne Flügel - Wilhelm Raabe'
  },
  {
    'quote': '<a href="#">sample link</a> As soon as you give up hope – everything is lost  '
  },
  {
    'quote': '<a href="#">sample link</a> You are only truly alone if you choose to be alone'
  },
  {
    'quote': '<a href="#">sample link</a> Data!data!data! I cannnot make bricks without clay  - ACDoyle'
  },
  {
    'quote': '<a href="#">sample link</a> Nothing ever goes away until it teaches us what we need to know - Perma Chodron'
  },
  {
    'quote': '<a href="#">sample link</a> We attract what we are'
  },
  {
    'quote': '<a href="#">sample link</a> The person who broke you cannot be the one to fix you'
  },
  {
    'quote': '<a href="#">sample link</a> There is only one way to avoid criticism   Do nothing say nothing  and be nothing – Aristotle'
  },
  {
    'quote': '<a href="#">sample link</a> I know nothing except the fact of my ignorance - Aristotle'
  },
  {
    'quote': '<a href="#">sample link</a> If you are absent during my struggle  do not expect to be present during my success – Will Smith'
  },
  {
    'quote': '<a href="#">sample link</a> It\'s not Music - It\'s magic'
  },
  {
    'quote': '<a href="#">sample link</a> Sometimes - indeed - there is such a discrepancy between the genius and his human qualities that one has to ask oneself whether a little less talent might not have been better - C. G. Jung'
  },
];

function generateQuote() {
  const random = Number.parseInt(Math.random() * arrayOfQuotes.length);
  document.querySelector('#quoteOutput').innerHTML = `\"${arrayOfQuotes[random].quote}\"`;
}

div {
  text-align: left;
}

h1 {
  font-size: 11px;
  font-family: Arial;
}

button {
  width: 128px;
  height: 28px;
  background-color: white;
  color: black;
}

{
  font-size: 11px;
}

button:hover {
  background-color: white;
}

</style></head><body>

<div><button onclick="generateQuote();">QuoteOfTheDay</button>
  <p id="quoteOutput">
</div>