Copy textareas with unique button

Question

1.00/5 (1 vote)

See more:

i write this code to copy textareas content with unique button but i have a problem that only the first textarea is copied

HTML

<pre><body>


<textarea class="form-control" tabindex="0">something</textarea>
 <button  onclick="myFunction()">clickme</button>
<textarea class="form-control"tabindex="3" >something1</textarea>
 <button  onclick="myFunction()">clickme</button>
<textarea class="form-control" >something2</textarea>

  <button onclick="myFunction()">clickme</button>
  


  <script>
   var copyText = document.getElementsByClassName("form-control")[0];
 function myFunction() {

		
  // Get the text field
 

  // Select the text field
  copyText.select();
  copyText.setSelectionRange(0, 99999); // For mobile devices

   // Copy the text inside the text field
  document.execCommand("copy");

  // Alert the copied text
  alert("Copied the text: " + copyText.value);
  
  ///second
  
  
} 
  </script>
</body>

but the button copy tthe first textarea only

You can try the code and you understand my problem
Thanks a lot

What I have tried:

copy first textarea button issue

Posted 30-Nov-22 0:28am

Red Kipling

Updated 30-Nov-22 1:08am

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Richard Deeming · Answer 1 · 2022-11-30T01:08:00

You need to get the reference to the element you want to copy from within the event handler.

Based on the markup in this copy of the question, the element is the immediate preceding sibling of the button; therefore:

HTML

<textarea class="form-control" tabindex="0">something</textarea>
<button type="button" class="copy-button">clickme</button>
<textarea class="form-control"tabindex="3" >something1</textarea>
<button type="button" class="copy-button">clickme</button>
<textarea class="form-control" >something2</textarea>
<button type="button" class="copy-button">clickme</button>

JavaScript

document.addEventListener("click", e => {
    let button = e.target;
    if (button.tagName !== "BUTTON") { button = button.closest("button"); }
    if (!button || !button.classList.contains("copy-button")) { return; }
    
    e.preventDefault();
    
    let textarea = button.previousElementSibling;
    while (textarea && textarea.tagName !== "TEXTAREA") {
        textarea = textarea.previousElementSibling;
    }
    
    if (!textarea) {
        alert("Unable to find the textarea to copy!");
        return;
    }
    
    textarea.select();
    textarea.setSelectionRange(0, 99999);
    document.execCommand("copy");
    alert(`Copied the text: ${textarea.value}`);
});

Demo[^]