Create Buttons In Paragraphs

Admin 1
Viewed 61

I want to create copy buttons after paragraphs tags. Here is the html i am using -

<div class="main"><p class="heading">Example Number One.</p></div>
<div class="main"><p class="heading">Example Number Two.</p></div>
<div class="main"><p class="heading">Example Number Three.</p></div>

I am using Javascript to add button after each p tag but not working properly means all buttons copying "example number one" only etc.

i want to do like this.

<div class="main"><p class="heading">Example Number One.</p><button class="copy-btn">Copy</button></div>
<div class="main"><p class="heading">Example Number Two.</p><button class="copy-btn">Copy</button></div>
<div class="main"><p class="heading">Example Number Three.</p><button class="copy-btn">Copy</button></div>

Note:=

  • I want to use & using pure Javascript (No Jquery).

JAVASCRIPT

    const parentObject = document.getElementsByClassName('heading');
    [...parentObject].forEach((parent, i) => {
      const child = document.createElement('button');
      child.className = 'copy-btn';
     child.innerHTML = 'Copy';
      parent.appendChild(child)
    });

copyBtn = document.querySelector('.copy-btn');  
copyBtn.addEventListener('click', function(event) {  
  var para = document.querySelector('.heading');  
  var range = document.createRange();  
  range.selectNode(para);  
  window.getSelection().addRange(range);  
  
   var successful = document.execCommand('copy');  
  window.getSelection().removeAllRanges();  
});
button copy arrays html javascript
2 Answers

This is the thing that you want:

const parentObject = document.getElementsByClassName('heading');
[...parentObject].forEach((parent, i) => {
    const child = document.createElement('button');
    child.className = `copy-btn copy-btn-${i}`;
   child.innerHTML = 'Copy';
    parent.appendChild(child)
});

copyBtn = document.querySelectorAll('.copy-btn');
copyBtn.forEach(btn => {
    btn.addEventListener('click', () => {
        const parent = btn.parentElement;
        const range = document.createRange();
        range.setStart(parent, 0);
        range.setEnd(parent, 1);
        window.getSelection().addRange(range);
        var successful = document.execCommand('copy');
        window.getSelection().removeAllRanges();
    });
});
<div class="main"><p class="heading">Example Number One.</p></div>
<div class="main"><p class="heading">Example Number Two.</p></div>
<div class="main"><p class="heading">Example Number Three.</p></div>

user_74095060

From the previous answer, heading is not the parent. Main is

const parentObject = document.getElementsByClassName('main');
user_145095990
Related