1
Is it possible to hyperlink generated output? (lemmy.world)
submitted 1 year ago by to c/perchance@lemmy.world
5 comments fedilink hide all child comments
 

Hi community. I am new to Perchance and coding in general but am so happy it exists! I searched the post archives, but couldn't find anything about this. Apologies if this has already been covered.

Is it possible to hyperlink part of the generator's output? For example, in this generator (https://perchance.org/wrongquotes), if I wanted to hyperlink the name of the person who said the quote so it points to another URL, is that possible?

I tried using a a href tag but that doesn't work, also tried adding a 'url' property to the 'source' object but that didn't work either.

I suppose a workaround could be to just display the full url as part of the displayed text, but just curious if a more elegant solution exists.

Thanks in advance!

you are viewing a single comment's thread
view the rest of the comments
[–] [S] 1 point 1 year ago (1 child)

Thank you. I attempted this but I ran into an error.

I added a test category where I associated unique urls with different quotes as you outlined above. The preview window showed an error message as soon as I made this change: "In the function called getQuotes within your lists editor, near line number 12, there's a mistake in your code that's causing this error: Unexpected identifier 'url'."

I assumed it was because I didn't add in quoteEntry.url yet in the HTML/CSS editor, so I made that change as well, but the error persists. So now I'm wondering if I did the <a> tag correctly.

Is this written correctly?: <a id="quoteSourceEl" target="_blank" class="source" href="quoteEntry.url"></a>

And is the <a> tag the only place where I need to reference quoteEntry.url?

Thanks so much for the help!

  • permalink
  • fedilink
  • source
  • parent
  • hideshow 1 child comment
    •
  • [–] 1 point 1 year ago

    You can set the href through your code, not directly on the HTML e.g.:

    // function generateMisquote()
  ...
  // Select quote from array if necessary
  const original = selectQuote(quoteEntry.original);
  const misquoted = selectQuote(quoteEntry.misquoted);
  const source = selectQuote(quoteEntry.source);
  const url = quoteEntry.url // get the url link
  ...
  // Update after a short delay for the fade-out effect
  setTimeout(function() {
    // Display the misquoted quote and source
    quoteTextEl.textContent = misquoted.text;
    quoteSourceEl.textContent = `— ${source.text}`;
    quoteSourceEl.href = url; // set the href based on the url link
  ...
  • permalink
  • fedilink
  • source
  • parent