Create a One-Line JavaScript Copy-to-Clipboard Button Easily

I am going to create a button which can copy the text from the website. I have a basic HTML setup with a paragraph that contains some text and an id, and a button with the label “Copy text”. When I click the button, I want the functionality that this particular text gets copied.

JavaScript Copy to Clipboard: Basic HTML

Create a One-Line JavaScript Copy-to-Clipboard Button Easily 1

Here is the simple structure. There is a paragraph with an id and a button.

<p id="text-to-copy">This is the text to copy.</p>
<button onclick="copyText()">Copy text</button>

Create a One-Line JavaScript Copy-to-Clipboard Button Easily 10

JavaScript Copy to Clipboard: Core Logic

Create a One-Line JavaScript Copy-to-Clipboard Button Easily 2

I will write the JavaScript internally and create a function named copyText. Inside this function, I will first take the text from the paragraph using its id, then write that text to the clipboard using the Clipboard API. If the copy action succeeds, I will show an alert. If it fails, I will log the error.

<script>
  function copyText() {
    const text = document.getElementById('text-to-copy').innerText;

    navigator.clipboard.writeText(text)
      .then(() => {
        alert('Text is copied');
      })
      .catch(err => {
        console.log('Fail to copy due to ' + err);
      });
  }
</script>

Create a One-Line JavaScript Copy-to-Clipboard Button Easily 8

Get the text from the paragraph

Create a One-Line JavaScript Copy-to-Clipboard Button Easily 3

I am taking the paragraph node by its id and reading its inner text.

const text = document.getElementById('text-to-copy').innerText;

Create a One-Line JavaScript Copy-to-Clipboard Button Easily 4

Write the text to the clipboard

Create a One-Line JavaScript Copy-to-Clipboard Button Easily 5

I am using the navigator.clipboard.writeText method to copy the text.

navigator.clipboard.writeText(text)

Create a One-Line JavaScript Copy-to-Clipboard Button Easily 6

Handle success and errors

Create a One-Line JavaScript Copy-to-Clipboard Button Easily 13

If it gets successful, I will show an alert that the text is copied. Otherwise, I will catch the error and log it.

.then(() => {
  alert('Text is copied');
})
.catch(err => {
  console.log('Fail to copy due to ' + err);
});

Create a One-Line JavaScript Copy-to-Clipboard Button Easily 7

JavaScript Copy to Clipboard: Complete Example

Create a One-Line JavaScript Copy-to-Clipboard Button Easily 11

This is how the whole code and the whole structure should be.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Copy to Clipboard</title>
  </head>
  <body>
    <p id="text-to-copy">This is the text to copy.</p>
    <button onclick="copyText()">Copy text</button>

    <script>
      function copyText() {
        const text = document.getElementById('text-to-copy').innerText;

        navigator.clipboard.writeText(text)
          .then(() => {
            alert('Text is copied');
          })
          .catch(err => {
            console.log('Fail to copy due to ' + err);
          });
      }
    </script>
  </body>
</html>

Create a One-Line JavaScript Copy-to-Clipboard Button Easily 9

Quick test

Reload the page. Click the Copy text button. Paste into any text editor using Ctrl + V to confirm the copied content.

Create a One-Line JavaScript Copy-to-Clipboard Button Easily 12

Final Thoughts

I created a function that reads the paragraph’s inner text, writes it to the clipboard with navigator.clipboard.writeText, handles success with an alert, and logs any error. The button calls this function using the onclick attribute, and the copy action works as expected.