as you would have guessed from my question and as you will interpret by looking at my code , im a beginner. this is the first real application i tried to write in javascript and i would love to understand why it doesn't work?

var button = document.getElementById("button");
var text = document.getElementById("text");
function button() {
 text.select();
 text.setSelectionRange(0, 99999); 
navigator.clipboard.writeText(text.value);
alert("you copied this text");
}

button is a onclick event in html and text is an input in html. thank you very much

CodePudding user response：

As mentioned, the writeText is a promise, but also the Clipboard API needs permision. Check this if the permission is granted or not

function myFunction() {
  /* Get the text field */
  var copyText = document.getElementById("myText");

  /* Select the text field */
  copyText.select();
  copyText.setSelectionRange(0, 99999); /* For mobile devices */

  /* Copy the text inside the text field */
  navigator.clipboard.writeText(copyText.value).then(function() {
    alert("Copied to clipboard successfully!");
  }, function(error) {
    alert("ERROR:\n" error);
  });;
}

async function CheckPermission(){
  const readPerm = await navigator.permissions.query({name: 'clipboard-read', allowWithoutGesture: false });
  
  const writePerm = await navigator.permissions.query({name: 'clipboard-write', allowWithoutGesture: false });
  
  // Will be 'granted', 'denied' or 'prompt':
  alert('Read: ' readPerm.state '\nWrite: ' writePerm.state);
}

<input type="text" value="ASDF" id="myText">
<button onclick="myFunction()">Copy text</button><br><br>
<button onclick="CheckPermission()">Check Permission</button>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

If so, need to ask permission. More info here.

CodePudding user response：

i don't know if i should write this as an answer or what. but anyways i rewrote the code and it ended up like this :

var text = document.getElementById("text");
var button = document.getElementById("button");

function buttonholder() {
text.select();
text.setSelectionRange(0, 99999)
navigator.clipboard.writeText(text.value);
}
button.addEventListener("click",buttonholder);

thank you everyone that replied. its working fine. i don't know why the first code didn't work but well the second code is much better than the last one again thanks for helping. some of your references made me think of addEventListener.