0
 appendPre(file.name + ' (' + file.viewedByMeTime + ')'+ ' (' + file.webViewLink + ')' +' (' + file.quotaBytesUsed + ' bytes)');

When it displays: Its shows this

How can I make the URL clickable?

Also, how can I bold file.name and change the color of the text?

pinoyyid
  • 21,499
  • 14
  • 64
  • 115
Pig
  • 7,505
  • 3
  • 10
  • 14
  • Its clickable, but it won't link you url. I mean, you can click on it all you want, but nothing will happen. – Pig Mar 10 '17 at 19:54
  • [Learn HTML](https://www.w3schools.com/html/default.asp) and [Javascript](https://www.w3schools.com/js/default.asp) – Sam Axe Mar 10 '17 at 19:56
  • @Sam Axe Lame. Not constructive -- you could say "
     tags are for only text and can't contain links, you should post more code". And "learn HTML and Javascript", while probably a good reference, hardly addresses the specific question and is a little condescending.
     – jdbiochem Mar 10 '17 at 20:15
  • Well it states that its possible here: http://stackoverflow.com/questions/13841386/is-it-possible-to-use-an-a-tag-within-a-pre-tag – Pig Mar 10 '17 at 20:21
  • Woah. I stand corrected. I've never seen any markup like that in a 
     tag, in fact, I'm not sure how you would do it. If you just appended the string "link" into a 
    , it would just show those characters instead of rendering a link. You have to use "‍" and other voodoo to make this possible, so it's probably a better practice to use something other than a 
     tag if preformatted text isn't your goal.
     – jdbiochem Mar 10 '17 at 20:26

1 Answers1

0

Edit

@Pig correctly pointed out that you are allowed to put content into a <pre> tag, it's just a real pain for no real benefit. If your goal is to make a list of items with clickable links, I think a <ul> and adding <li>'s with Javascript is better. Maybe even a <table> and adding rows! Delicious.

What's up @Pig! It's your bro @jdbiochem. Here's the appendPre() function I think you're talking about (you should post the functions you're using in a question like this :) ).

  function appendPre(message) {
    var pre = document.getElementById('content');
    var textContent = document.createTextNode(message + '\n');
    pre.appendChild(textContent);
  }

This adds to a <pre> tag, which renders preformatted text. You can't shouldn't really put anything in a <pre> tag besides text itself. So, you might think about making a different function to make a link, maybe something like this:

function appendLink(url) {
    // create a DOM node, an <a> tag.
    var link = document.createElement('a');

    // a "text node" is what lives inside the tag <a>text node</a>
    var _text = document.createTextNode("click me");

    // add that text node to the link, so now we have: <a> click me </a>
    link.appendChild(_text);

    // set the actual link in the href attribute
    link.href = url;

    // add a CSS class so we can control the style of text easily
    link.classList.add('drive-link');

    // add this link somewhere in your document
    doucment.getElementById('links').appendChild(link);
}

Keep in mind this function takes only the URL, so using it in all the places you have appendPre() will not work.

If you want the link bold and a different color, your CSS class might look like:

.drive-link {font-weight: bold; color: peachpuff;}

(BTW, you should mark answer to your earlier question correct!)

Community
  • 1
  • 1
jdbiochem
  • 187
  • 9
  • hey thanks @jdbiochem, so the function I am using is the sample listFile Function from: https://developers.google.com/drive/v3/web/quickstart/js#step_2_set_up_the_sample, with some changes. How do I apply your function's code to mine? Also, I only want file.webViewLink to be a clickable URL, nothing else. – Pig Mar 10 '17 at 21:06
  • @jgbiochem, also, I want everything to be in the same line if that is possible. – Pig Mar 10 '17 at 22:19
  • Lastly, do I trigger it with: appendLink(file.webView); ? – Pig Mar 10 '17 at 22:44