Click here to Skip to main content
15,566,520 members
Please Sign up or sign in to vote.
1.00/5 (2 votes)
See more:
i make two different textareas and a button and i wish that the same button copy the textarea content on click

this is my html code
HTML
<pre><html>
<head>
<!-- BEGIN image_thumb --><head>

  <style>


.mycontainer{
  background: white;
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-radius: 6px;
}

.copy-text{
  border: 2px solid #111;
  padding: 16px 20px;
  font-size: 16px;
  font-weight: 600;
  height: 350px;
  width: 800px;
  margin-bottom: 20px;
  font-family: inherit;
  border-radius: 2px;
}

.copy-btn{
  padding: 12px 12px;
  border: 0px;
  background: #3F88C5;
  color: white;
  width: 120px;
  font-size: 16px;
  font-family: inherit;
  cursor: pointer;
  font-weight: 600;
}

.copied{
  background: #04AA6D;
  transition: 0.5s;
}
::selection{
  background: #04AA6D;
  color:white;
}


</style>


    <div class="text-center mt-3 w-100">
        <a target="_blank" href="{b_url_link}"><img src="{b_img_link}" alt="" class="img-thumbnail rounded" /></a>
    </div>


    
<!-- END image_thumb -->


<!-- BEGIN image -->

    
        <label for="image1">{b_title}</label>
		
         <textarea   id="image1" rows="1" cols="40" class="form-control" tabindex="2" >{b_url_link}</textarea>
		
		
	<div class="mycontainer">
	
		 <button class="copy-btn"  >Copy</button>
  
	</div></div>
    
    </<br>
    
     <textarea   id="image1" rows="1" cols="40" class="form-control" tabindex="2" >{b_url_link}</textarea>
		
		
	<div class="mycontainer">
	
		 <button class="copy-btn"  >Copy</button>
  
	</div></div>


and this is my javascript code

JavaScript
<pre>
const btn = document.querySelector(".copy-btn");
const text = document.querySelector(".form-control");

btn.addEventListener("click", () =>{
  text.select();
  text.setSelectionRange(0, 10000);
  document.execCommand("copy");
  btn.classList.toggle("copied");
  btn.innerHTML = "Copied";

  setTimeout(function(){
    btn.classList.toggle("copied");
    btn.innerHTML = "Copy";
  }, 3000);
});


i would like that when i click on the copy button the correspendant textarea content is copied.
Thanks advance

Screenshot link



What I have tried:

Copy different textarea content with same button
Posted
Updated 29-Nov-22 6:02am
v2
Comments
Richard Deeming 29-Nov-22 9:21am    
Your question is unclear. You say you want to copy different textareas with the same button, but you don't explain how you know which one to copy. Your HTML markup then shows multiple buttons, but again with no way to know which button is supposed to be connected to which textarea.
Red Kipling 29-Nov-22 10:54am    
thx for reply
I wish to copy the first textarea with the button and then copy the second textarea content with the same button
In html code there's only one same button added to every textarea
Richard Deeming 30-Nov-22 3:41am    
But that's my point - you don't have "one same button"; you have two different buttons.

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



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900