How do I copy text to the clipboard in JS?

Question

I would like to put a copy paste on the email, when clicking on the email, the email is copied automatically. I've tried several techniques but I can't.

Here is my code:

    content += '<table class="table"><thead><tr><th>Nom</th><th>Prénom</th><th>Companie</th><th>Tags</th><th class="copy">Email</th></tr></thead><tbody>';

    JSON.parse(data).forEach(id => {
     
      content += '<tr>';
      content += '<td>' + id.lastname + '</td>';
      content += '<td>' + id.firstname + '</td>';
      content += '<td>' + id.company + '</td>';
      content += '<td>' + id.tags + '</td>';
      content += '<td>' + id.email + '</td>';
      content += '</tr>';
    });

    

Answer 1

the main issue come from this line let mail = tabStudents.email; tabstudents is not define and in the process you try to do it's from the iterator of the foreach loop

in my sample i renamed it student

JSON.parse(data).forEach(student => {
let mail = student.email;

here the full sample

function displayPopup(data) {
  if (data) { // si data n'est pas vide
    let content = '';

    let modal = document.getElementById("myModal");
    let contentModal = document.getElementById("modal-body");
    let span = document.getElementsByClassName("close")[0];

    content += '<table class="table"><thead><tr><th>Nom</th><th>Prénom</th><th>Companie</th><th>Tags</th><th class="copy">Email</th></tr></thead><tbody>';

    JSON.parse(data).forEach(student => {
      let mail = student.email;
      console.log(mail)
      content += '<tr>';
      content += '<td>' + student.lastname + '</td>';
      content += '<td>' + student.firstname + '</td>';
      content += '<td>' + student.company + '</td>';
      content += '<td>' + student.tags + '</td>';
      content += '<td>' + student.email + '</td>';
      content += '</tr>';
    });

    content += '</tbody></table>';

    contentModal.innerHTML = content;
    modal.style.display = "block"

    span.onclick = function() {
      modal.style.display = "none";
    }

    window.onclick = function(event) {
      if (event.target == modal) {
        modal.style.display = "none";
      }
    }
  }
}

displayPopup('[{"id": 1, "email":"[email protected]"}]');

<div id="myModal">
  <div id="modal-body">
    <span class="close"></span>
  </div>
</div>