-2

I have a lot of data in my database and I have made a input field.

In that input field I am calling data from database.

I want to create a download button and a copy text button for that input field so that when I click it, it get copied and downloaded but neither of these buttons are working. Both are giving the same error When I click on any of these buttons the data which is getting displayed in the text area should get downloaded when clicking on download button and text should get copied from text area

function myFunction() {
  var copyText = document.getElementById("myInput");
  copyText.select();
  copyText.setSelectionRange(0, 99999);
  navigator.clipboard.writeText(copyText.value);

  var tooltip = document.getElementById("myTooltip");
  tooltip.innerHTML = "Copied: " + copyText.value;
}

function outFunc() {
  var tooltip = document.getElementById("myTooltip");
  tooltip.innerHTML = "Copy to clipboard";
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<h4 style="margin-top: 17;">Smiles</h4>
<form action=="" method="post">
  <label for="smiles">Canonical smiles:</label>
  <input type="text" value="smilenotation" id='myInput' style="width: 700px">
  <button onclick="myFunction()" onmouseout="outFunc()" title='copy text'>Copy</button>
  <button class="smile-download" title="Download SMILES file."> <i class="fa fa-download"></i>  </button>
</form>
  • 1
    Only error I am seeing here (apart from the fact that the page reloads, because you are actually submitting your form when you click them), is that `tooltip.innerHTML = ...` throws an error, because `tooltip` is null; but that is simply due to the fact that your snippet does not contain an element with that ID. – CBroe May 19 '22 at 09:56
  • the question i am asking is i want that when i click on the download button THIS SHOULD DOWNLOAD THETEXT WRITTEN IN THE INPUT FIELD AND when i click in copy text this should get copied into the clipboard – Abhishek Khatri May 19 '22 at 10:21
  • Please first fix your code to work. Then look at the dupes – mplungjan May 19 '22 at 13:31

0 Answers0