CODEWITHSUNDEEP
javascripthtmlgoogle-apps-script
Mask
Mask

Reputation: 573

Is there a way to hyper link data into variables copied from spreadsheet

I have a variable that java-script copied from google spreadsheet and I am also able to display it into html form using <textarea>. My problem is that i also have a link in form of a variable that I want to hyperlink with my previous variable:-

I think my code will explain a little more:-

Javascript copied a cell value that is "Hello there, I am groot"

code.gs:- 

function fetchValues(){
  var ss = SpreadsheetApp.getActiveSpreadsheet();
  var sheet = ss.getSheetByName("Sheet1"); //Enter your sheet Name
  var data  =  sheet.getRange("B2").getValues();

  return data;
}

now I want to hyperlink the "there" part of my variable and display into my HTML.

Here is my iNdex.html :-

<!DOCTYPE html>
<html>

<head>
<base target="_top">
</head>
<textarea class="js-copytextarea" style="width:100%;" rows="5" id="a" Value"a" name="a"></textarea>
<p>
<button class="js-textareacopybtn">Copy Textarea text</button>
</p>

<script>
function displayValue3(data){
document.getElementById("a").value=data;
}

var copyTextareaBtn = document.querySelector('.js-textareacopybtn');

copyTextareaBtn.addEventListener('click', function(event) {
var copyTextarea = document.querySelector('.js-copytextarea');
copyTextarea.select();

try {
var successful = document.execCommand('copy');
var msg = successful ? 'successful' : 'unsuccessful';
console.log('Copying text command was ' + msg);
} catch (err) {
console.log('Oops, unable to copy');
}
});
</script>
</html>

Now I just don't know how to add that variable link into "there" from "Hello there, I am groot" and display the text into text area.

Upvotes: 1

Views: 98

Answers (1)

Ritesh Nair
Ritesh Nair

Reputation: 3355

You can't add link inside a textarea, the textarea can only display text content. You can use label or if you want to edit the content you can use div with contentEditable attribute.

<div class="js-copytextarea" style="width:100%;" contentEditable id="content" name="a"></div>

function displayValue3(data){
  document.getElementById("content").innerHTML="<a href='"+data+"'>there</a>"; //I hope data has the valid link
}

Upvotes: 1

Related Questions