Как копировать текст ссылок в буфер обмена?

Question

[Александр Андропов]

Я столкнулся с тем, что если использовать несколько ссылок с одинаковым ID то не работает копирование в буфер. Насколько я помню, это по причине того, что ID должен быть уникальным. Как можно реализовать копирование? Можно используя например data атрибуты ?

Делаю так:

<?php
$coins[0]['name'] = "Adena";
$coins[1]['name'] = "Oren";
$coins[2]['name'] = "Giran";

echo "<br>";

for($i=0; $i < 3; $i++) {
   echo "<a id='copyticker' href='#'>".$coins[$i]['name']."</a>" . "<br>"; 
}

?>

<script>
    const copy = document.querySelector('#copyticker');
    copy.addEventListener('click',
        function(event) {
            event.preventDefault();
            const text = document.querySelector('#copyticker');
            navigator.clipboard.writeText(text.textContent);
        });  
</script>

Подскажите как копировать текст у нескольких ссылок ?

Comments

[Сергей Сергей]

Почему нельзя id сделать уникальными? Индекс просто добавить к строке.

[Александр Андропов]

Сергей Сергей, наоборот, индексы же могут быть только уникальными. Я не пойму, как мне сделать функцию в JS, которая будет копировать текст ссылки (или дата атрибут) с определенным: id / классом, дата-атрибутом или ещё как

[WbICHA]

Александр Андропов,

наоборот, индексы же могут быть только уникальными.

И по какой причине тогда ты несколько одинаковых индексов добавляешь?

Answer 1

[black1277]

можно добавить дата-атрибут каждой ссылке:

<a data-mylink='copyticker' href='#'>coins1</a>
<a data-mylink='copyticker' href='#'>coins2</a>
<a data-mylink='copyticker' href='#'>coins3</a>

а в скрипте выбирать их по этому атрибуту:

const copy = document.querySelectorAll('a[data-mylink]')
...

ну и делать с ними что надо