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 .

Answer 2

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 textinput(selector) {
text.select();
text.setSelectionRange(0, 99999); 
}
function buttonholder() {
navigator.clipboard.writeText(text.value);
}
button.addEventListener("click",buttonholder);

thank you everyone that replied. the copy part is working and its ok. but in the code above as you can see i made a function that would select the input. but i wonder how can i call it? i tried some typical code but couldn't puzzle it in. again thanks for helping

Answer 3

You've already used "function" as an identifier for your button element. So just change your function's name (eg buttonHandler) and it would work.

Answer Code :

var button = document.getElementById("button");
var text = document.getElementById("text");
function buttonHandler() { 
navigator.clipboard.writeText(text.value);
alert(`you copied this ${text.value}`);
}

PS. don't forget to change the name of the function in your HTML file.