Duplicate the content by selecting the text and clicking on the button

Question

Duplicate the content by selecting the text and clicking on the button

After clicking on a table cell, I can copy the text but not after clicking on a button. Any suggestions on how to solve this issue? I suspect the problem might be in this line of JS:

const el = document.createElement('textarea');

, but I'm unsure. https://codepen.io/S4UCY/pen/abNpyWB

/* Copy after clicking on text */
document.querySelectorAll(".table-cell").forEach(function(elm){
elm.addEventListener("click", function(e){
 e.target.style.backgroundColor = 'green'; 
  var copyText = e.target.textContent; 
   const el = document.createElement('textarea');
  el.value = copyText;
  document.body.appendChild(el);
  el.select();
  document.execCommand('copy');
  document.body.removeChild(el);

 
  /* Alert the copied text */
  alert("Copied the text: " + el.value);
  
});

})



function myFunction() {
  /* Get the text field */
  var copyText = document.getElementById("myInput");

  /* 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);
}

td button{
    float: right;
}

td button:before {
  content: "Copy";
}

<table class="table">
  <thead>
    <tr>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
        <td class="table-cell" id="myInput" scope="row">kaching<button onclick="myFunction()" type="button" name="button"></button></td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <td class="table-cell">Jacob </td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <td class="table-cell">Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

javascript html jquery css

Answer 1

Answer №1

Instead of adding functionality to the button, consider letting the click event propagate up to the parent <li> element and handle everything in its listener.

document.querySelectorAll(".table-cell").forEach(function(elm) {
  elm.addEventListener("click", copyText);
})

function copyText(e) {
  const td = e.currentTarget;
  td.style.backgroundColor = 'green';
  var copyText = td.textContent;
  const el = document.createElement('textarea');
  el.value = copyText;
  document.body.appendChild(el);
  el.select();
  document.execCommand('copy');
  document.body.removeChild(el);

  /* Alert the copied text */
  alert("Copied the text: " + el.value);
}

td button {
  float: right;
}

td button:before {
  content: "Copy";
}

<table class="table">
  <thead>
    <tr>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="table-cell" id="myInput" scope="row">kaching<button type="button" name="button"></button></td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <td class="table-cell">Jacob </td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <td class="table-cell">Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

Answer 2

Instead of adding functionality to the button, consider letting the click event propagate up to the parent <li> element and handle everything in its listener.

document.querySelectorAll(".table-cell").forEach(function(elm) {
  elm.addEventListener("click", copyText);
})

function copyText(e) {
  const td = e.currentTarget;
  td.style.backgroundColor = 'green';
  var copyText = td.textContent;
  const el = document.createElement('textarea');
  el.value = copyText;
  document.body.appendChild(el);
  el.select();
  document.execCommand('copy');
  document.body.removeChild(el);

  /* Alert the copied text */
  alert("Copied the text: " + el.value);
}

td button {
  float: right;
}

td button:before {
  content: "Copy";
}

<table class="table">
  <thead>
    <tr>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="table-cell" id="myInput" scope="row">kaching<button type="button" name="button"></button></td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <td class="table-cell">Jacob </td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <td class="table-cell">Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

Answer 3

Answer №2

The occurrence of this issue can be attributed to the fact that when the button is clicked, it attempts to copy its own text rather than the content of the table cell.

elm.addEventListener("click", function(e){
    e.target.style.backgroundColor = 'green'; 
    var copyText = e.target.textContent; // in this case, "e" refers to the button element
   ...
}

Answer 4

The occurrence of this issue can be attributed to the fact that when the button is clicked, it attempts to copy its own text rather than the content of the table cell.

elm.addEventListener("click", function(e){
    e.target.style.backgroundColor = 'green'; 
    var copyText = e.target.textContent; // in this case, "e" refers to the button element
   ...
}

Answer 5

Answer №3

After considering your issue, I devised a unique solution. Instead of directly calling onclick="myFunction()", I decided to implement tag validation within the eventListener function to ensure that the element was a button. By doing so, I eliminated the need for the deprecated myFunction() and streamlined the code by preventing duplication.

/* Copy after clicking on text */
document.querySelectorAll(".table-cell").forEach(function(elm){
elm.addEventListener("click", function(e){
  var copyText;
  if(e.target.tagName == "BUTTON") { // <----- Validation
    /* Get the text field by searching for the cell */
    var elem = document.getElementById("myInput");
    elem.style.backgroundColor = 'green'; 
    copyText = elem.textContent;
  } else {
    /* Get the text field directly */
    e.target.style.backgroundColor = 'green'; 
    copyText = e.target.textContent;
  }
  
  const el = document.createElement('textarea');
  el.value = copyText;
  document.body.appendChild(el);

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

  /* Copy the text inside the text field */
  document.execCommand("copy");
  document.body.removeChild(el);

  /* Alert the copied text */
  alert("Copied the text: " + el.value);
});

})

function myFunction() {} // <------ Removed

td button{
    float: right;
}

td button:before {
  content: "Copy";
}

<table class="table">
  <thead>
    <tr>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
        <td class="table-cell" id="myInput" scope="row">kaching<button type="button" name="button"></button></td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
        <td class="table-cell">Jacob </td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
        <td class="table-cell">Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

Answer 6

After considering your issue, I devised a unique solution. Instead of directly calling onclick="myFunction()", I decided to implement tag validation within the eventListener function to ensure that the element was a button. By doing so, I eliminated the need for the deprecated myFunction() and streamlined the code by preventing duplication.

/* Copy after clicking on text */
document.querySelectorAll(".table-cell").forEach(function(elm){
elm.addEventListener("click", function(e){
  var copyText;
  if(e.target.tagName == "BUTTON") { // <----- Validation
    /* Get the text field by searching for the cell */
    var elem = document.getElementById("myInput");
    elem.style.backgroundColor = 'green'; 
    copyText = elem.textContent;
  } else {
    /* Get the text field directly */
    e.target.style.backgroundColor = 'green'; 
    copyText = e.target.textContent;
  }
  
  const el = document.createElement('textarea');
  el.value = copyText;
  document.body.appendChild(el);

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

  /* Copy the text inside the text field */
  document.execCommand("copy");
  document.body.removeChild(el);

  /* Alert the copied text */
  alert("Copied the text: " + el.value);
});

})

function myFunction() {} // <------ Removed

td button{
    float: right;
}

td button:before {
  content: "Copy";
}

<table class="table">
  <thead>
    <tr>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
        <td class="table-cell" id="myInput" scope="row">kaching<button type="button" name="button"></button></td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
        <td class="table-cell">Jacob </td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
        <td class="table-cell">Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

Answer 7

Answer №4

This is the cause of the issue

elm.addEventListener("click", function(e){
    e.target.style.backgroundColor = 'green'; 
    var copyText = e.target.textContent; // when the button is clicked, "e" refers to the button
   ...
}

Answer 8

This is the cause of the issue

elm.addEventListener("click", function(e){
    e.target.style.backgroundColor = 'green'; 
    var copyText = e.target.textContent; // when the button is clicked, "e" refers to the button
   ...
}

Duplicate the content by selecting the text and clicking on the button

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

CSS transform: applying the same CSS to multiple divs results in a variety of different outcomes

Getting Session from Next-Auth in API Route: A Step-by-Step Guide

Instead of broadcasting your message to the channel, try sending it directly to the user

I encountered a parsing issue while trying to compile my Vue project

Improperly removing a draggable element in jQueryUI can cause unexpected behavior

JS values are completely out of sync

Encountering a 400 Bad Request error while using the SharePoint 2013 Rest API

Using a conditional statement in a JavaScript loop

The ng-click function for the button is malfunctioning when viewed on a mobile device within the datatable

Preventing HTML entities from expanding in the HTML::TreeBuilder Perl module

Troubleshooting Blade Template HTML Coloration Problem in Atom

Interested in incorporating href within a PHP variable?

Switch effortlessly between various THREE.EffectComposer scenes with a single renderer in three.js

Steps for creating an npm package from the /build folder of Create React App

Accessing a menu through key input

I am curious if it is possible to generate a dynamic table content by utilizing an ajax get request to retrieve and parse json data

What could be causing the onclick function in the button tag to malfunction?

Transferring information between Flask and JS using AJAX for a Chrome extension

The selectize feature is failing to show search results

Encountering difficulties with uploading files and images in a Node.js environment