my copy to clipboard code in JavaScript doesn't work

Question

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

Answer 1

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>

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