Script that copies text to clipboard when click on text

Question

I've got a question about the following script:

function copyElementText(id) { var text = document.getElementById(id).innerText; var elem = document.createElement("textarea"); document.body.appendChild(elem); elem.value = text; elem.select(); document.execCommand("copy"); document.body.removeChild(elem); console.log('Copy made'); }

 <font id="text" onclick="copyElementText(this.id)">Copy this text</font>

This script copies the text to the clipboard when you click on it.

I can only use this once. I need this multiple times in a HTML file. How can I adjust the script so I can use it more times?

Thanks!

What makes you think it's executed only one time? As you can see your code is working fine in SO Snippet. And you can use it on other elements, just make sure your ID's are unique — Justinas
– Justinas, Commented Jan 14, 2021 at 9:11
Let me ask you a question. Why don't you mark the answers as resolved after you receive those answers? All your questions that you ask are not closed. — s.kuznetsov
– s.kuznetsov, Commented Jan 14, 2021 at 9:12
Emphasis on @s.kuznetsov, if/when your question is answered you should accept the correct answer by clicking the green tick by it :) — dwb
– dwb, Commented Jan 14, 2021 at 9:19

Nguyễn Văn Phong · Accepted Answer · 2021-01-14 09:30:43Z

Firstly, your code is working fine with one text.
Secondly, you should care about Id attribute

So to resolve it, you should add another text with a different ID attribute like below.

The id attribute is a unique identifier that is used to specify the document

function copyElementText(id) { var text = document.getElementById(id).innerText; var elem = document.createElement("textarea"); document.body.appendChild(elem); elem.value = text; elem.select(); document.execCommand("copy"); document.body.removeChild(elem); console.log(text); }

<font id="text1" onclick="copyElementText(this.id)">Copy this text</font> <font id="text2" onclick="copyElementText(this.id)">Copy another text</font>

If there are a lot of <font> tags, then it is better to use a class instead of id like below

function copyElementText(event) { var text = event.innerText; var elem = document.createElement("textarea"); document.body.appendChild(elem); elem.value = text; elem.select(); document.execCommand("copy"); document.body.removeChild(elem); console.log(text); }

<font class="text" onclick="copyElementText(this)">Copy this text</font> <font class="text" onclick="copyElementText(this)">Copy another text</font>

Thanks for your reply, I didn't know that chaning the ID was the answer for this. I thought I could use the ID Text only once but it seems I was wrong.
@Cid I thought I could use the ID Text only once It seems to me that the OP is wrong with ID vs class. So I've just added a more detailed explanation to it. pls, take a look at sir.
If there are a lot of <font> tags, then it is better to use a class instead of id, and in the javascript logic use the forEach()method or for.
@WJ496582 Does this answer your question? Let me know if you need any help.

A.Sideris · Accepted Answer · 2021-01-14 09:21:27Z

You need to attach event listener to every element as in the example below if you are using vanilla JS. Please take a look

 var links = document.querySelectorAll('.link') links.forEach( function (cb) { cb.addEventListener("click", linkClicked) }) function linkClicked(e) { e.preventDefault(); var url = e.target.getAttribute('data-url') console.log(url); copyTextToClipboard(url); } function copyTextToClipboard(text) { var textArea = document.createElement("textarea"); textArea.value = text; // Avoid scrolling to bottom textArea.style.top = "0"; textArea.style.left = "0"; textArea.style.position = "fixed"; document.body.appendChild(textArea); textArea.focus(); textArea.select(); try { var successful = document.execCommand('copy'); var msg = successful ? 'successful' : 'unsuccessful'; console.log('Fallback: Copying text command was ' + msg); } catch (err) { console.error('Fallback: Oops, unable to copy', err); } document.body.removeChild(textArea); }

Collectives™ on Stack Overflow

Script that copies text to clipboard when click on text

2 Answers 2

5 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Related