I want to copy text from p element with JavaScript

Question

I want to JavaScript code that copy my text from class copy-text when I click to class copy-me. Here is my html

<div class="text">
    <div class="text-wrapper">
        <p class="copy-text">This will be copy</p>

        <div class="bottom-element">
            <span class="i-text">Share</span>

            <span class="copy-me"> Copy Text </span>
        </div>
    </div>
</div>

<div class="text">
    <div class="text-wrapper">
        <p class="copy-text">This will be copy</p>

        <div class="bottom-element">
            <span class="i-text">Share</span>

            <span class="copy-me"> Copy Text </span>
        </div>
    </div>
</div>
<div class="text">
    <div class="text-wrapper">
        <p class="copy-text">This will be copy</p>

        <div class="bottom-element">
            <span class="i-text">Share</span>

            <span class="copy-me"> Copy Text </span>
        </div>
    </div>
</div>

I tried with

document.querySelectorAll('.copy-me').forEach(() => {

}

But It didn't work, help me on this, Thank you.

This is a basic question, some search would have helped you here. — Abhishek Jain, Aug 09 '22 at 18:04

score 0 · Answer 1 · answered Aug 09 '22 at 17:15

Event Listeners, either for vanilla JavaScript or for react. This can help you do actions on you page, sorry for not being too much help I Just need more information to give a good solution.

But here is how to use them

https://www.w3schools.com/js/js_htmldom_eventlistener.asp

https://reactjs.org/docs/handling-events.html

score 0 · Answer 2 · answered Aug 09 '22 at 17:29

You can use getElementsByClass js function to access both p html elements and add 'click' event listener where you can copy the first p element innerText to second p element innerText. Sharing my sample code below for better understanding. Try clicking on the blue bordered paragraph.

const elems=document.getElementsByClassName('copy-me');
const p1=elems[0]; 
const elem=document.getElementsByClassName('copied');
const p2=elem[0];
p2.addEventListener('click',()=>{
  p2.innerText=p1.innerText;
})

<p class='copy-me'>hi there</p> 
<p class='copied' style='border:2px solid blue;height:20px'></p>

Muhammad Hassan Javed · Answer 3 · 2022-08-09T19:33:52.843

A generic solution according to your problem is here. You can select the grand parent of the button, which is container, then select your .copy-text element. Then log its value. Check your clipboard to view copied text.

document.querySelectorAll('.copy-me').forEach((elem, index) => {
        // Add click event listener to all elements
        elem.addEventListener("click", function (event) {
            // select grand parent which is text wrapper
            const textWrapper = event.target.parentElement.parentElement;
            // find .copy-text inside that container
            const copyTextElem = textWrapper.querySelector(".copy-text");
            navigator.clipboard.writeText(copyTextElem.innerText);
        });
    });

<div class="text">
    <div class="text-wrapper">
        <p class="copy-text">This will be copy</p>

        <div class="bottom-element">
            <span class="i-text">Share</span>

            <span class="copy-me"> Copy Text </span>
        </div>
    </div>
</div>

<div class="text">
    <div class="text-wrapper">
        <p class="copy-text">This will be copy</p>

        <div class="bottom-element">
            <span class="i-text">Share</span>

            <span class="copy-me"> Copy Text </span>
        </div>
    </div>
</div>
<div class="text">
    <div class="text-wrapper">
        <p class="copy-text">This will be copy</p>

        <div class="bottom-element">
            <span class="i-text">Share</span>

            <span class="copy-me"> Copy Text </span>
        </div>
    </div>
</div>

score 0 · Answer 4 · answered Aug 09 '22 at 17:40

You can addEventListeners to each element and copy the text

const elems = document.querySelectorAll('.copy-me');

elems.forEach((elem) => {
  elem.addEventListener('click', (e) => {
   // Get the text from the element that contains the text you want to copy
   const copiedText = 
     e.target.parentElement.previousElementSibling.innerHTML;
     // Copy text to clipboard - You can paste it using `Ctrl+v`
     navigator.clipboard.writeText(copiedText);
  })
})

To get a fallback for copying text to clipboard, you can check this link

I want to copy text from p element with JavaScript

4 Answers4