-3

I would like to copy the text stored in a specific code block in a list item to the clipboard when a user clicks a button. I've found various methods online that allow you to copy when you click something, but I want to be able to do all of this on the page if possible.

For example, I will have a list of items as follows:

  • Click this page.

  • Type this code:

     <Code Sample>

I would like to have a button that copies the code for that specific line item.

I've had success copying text using the solution provided in this other Stackoverflow forum, but that doesn't work if I'm wanting to have a button click copy text OTHER than what is stored in the button.

stacksuser0129
  • 1
  • 3
  • 1
    Does this answer your question? [How do I copy to the clipboard in JavaScript?](https://stackoverflow.com/questions/400212/how-do-i-copy-to-the-clipboard-in-javascript) – admcfajn Jul 29 '20 at 00:37
  • 1
    Hi, welcome to StackOverflow. Please review [ask] and provide a [mcve] when asking a question – admcfajn Jul 29 '20 at 00:38

1 Answers1

0

If you can place something with an id for example around the code blocks, you could do this:

<ul>
    <li>Click this page.</li>
    <li>
        Type this code:
        <div id="code">[Code Sample]</div>
    </li>
</ul>
<button type="button">Copy</button>

document.querySelector('button').addEventListener('click', () => {
  const code = document.getElementById('code');
  navigator.clipboard.writeText(code.innerHTML);
});
Emre Koc
  • 1,481
  • 10
  • 18