Copying value of
element to clipboard using Javascript

Question

I'm working on a password generator which generates a random passwords and displays inside a

element. That part works fine.

I want to copy the output value (generated password) in the

element to the clipboard when the user clicks on the password value in

Here's my code:

function copyPassword() {

    let password = document.getElementById("pwd").innerText
    let message = document.getElementById("msg")

    //This doesn't seem to work
    navigator.clipboard.writeText(password) 

    //This works
    message.innerText = "Copied to clipboard"
}

click me

UPDATE: I just checked in Firefox; this code seems to work perfectly. But it doesn't on Chrome, Edge and Safari.

UPDATE 2: I uploaded the files to a GitHub repo and published. Works just fine. So no issues with the code.

user_335018 · Answer

writeText is an async function, you should use then to get the result.

And chrome has some limitations for it, you can see error message if it failed.

function copyPassword() {

    let password = document.getElementById("pwd").innerText
    let message = document.getElementById("msg")

    //This doesn't seem to work
    navigator.clipboard.writeText(password)
      .then(() => {
        //This works
        message.innerText = "Copied to clipboard"
      })
      .catch((err) => {
        message.innerText = err.message
      })

    
}

click me

Copying value of <p> element to clipboard using Javascript

1 Answers