How can I make copy item from a long list using javascript

Question

Hi I create a list of 20 items and I want that when a user clicked on a item, it copied to their clipboard.

<ul id="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>
<li>16</li>
<li>17</li>
<li>18</li>
<li>19</li>
<li>20</li>
</ul>

Is it possible to make it with minimum javascript? It is hard to give id to each item of the list when the list is soo long.

https://stackoverflow.com/search?q=%5Bjavascript%5D+copy+to+clipboard — freedomn-m, Aug 09 '21 at 15:53
From a quick scan, this seems to be the easiest (and not 12 years out of date): https://stackoverflow.com/a/30810322/2181514 — freedomn-m, Aug 09 '21 at 15:55

score 1 · Answer 1 · answered Aug 09 '21 at 15:56

Add a click event listener to all the li elements that copies their textContent:

const listItems = document.querySelectorAll('#list li');
listItems.forEach(e => e.addEventListener('click', clickHandler));

function clickHandler(e) {
  copy(e.target.textContent);
}

function copy(text) {
    var input = document.createElement('input');
    input.setAttribute('value', text);
    document.body.appendChild(input);
    input.select();
    var result = document.execCommand('copy');
    document.body.removeChild(input);
    return result;
 }

<ul id="list">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li>10</li>
  <li>11</li>
  <li>12</li>
  <li>13</li>
  <li>14</li>
  <li>15</li>
  <li>16</li>
  <li>17</li>
  <li>18</li>
  <li>19</li>
  <li>20</li>
</ul>

@kevinmayank No problem. If it answers your question, please consider [accepting](https://meta.stackexchange.com/questions/5234/how-does-accepting-an-answer-work) :) — Spectric, Aug 09 '21 at 16:04

How can I make copy item from a long list using javascript

1 Answers1