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>