@geymer83

Как создать несколько кнопок для копирования ссылки по клику?

На страницу выведены картинки из папки img возле каждой картинки есть прямая ее ссылка - необходимо сделать кнопку скопировать для посетителя, чтобы по клику копировалась ссылка. Проблема заключается в том что кнопка работает только для первой картинки - на идущие следом либо не работает совсем, либо копирует текст из первой.
Вот такой код:

<?php
$path = $_SERVER['DOCUMENT_ROOT'] . '/img/';
$images = scandir($path);
if (false !== $images) {
    $images = preg_grep('/\\.(?:gif|png|jpe?g)$/', $images);
    foreach ($images as $image)
        echo '<img class="" src="/img/', htmlspecialchars(urlencode($image)),'" />
        <button class="" id="userButton">Копировать</button>
        <center><textarea id="copy" class="">ссылка для копирования</textarea></center>
        ';
}
?>
<script>
var button = document.getElementById('userButton');
button.addEventListener('click', function () {
  var ta = document.getElementById('copy'); 
  var range = document.createRange();
  range.selectNode(ta); 
  window.getSelection().addRange(range); 
  try { 
    document.execCommand('copy'); 
  } catch(err) { 
    console.log('Can`t copy, boss'); 
  } 
  window.getSelection().removeAllRanges();
}); 
<script>
  • Вопрос задан
  • 78 просмотров
Решения вопроса 1
MrDecoy
@MrDecoy Куратор тега JavaScript
Верставший фронтендер
ID должен быть уникальным на странице у html элементов. Вы же в цикле генерируете кучу кнопок с одинаковым id, так ещё и обработчик клика добавляете так же. Вот у Вас и срабатывает всё только на первой кнопке.

В данной статье рассматривается как работать с событиями в браузере на js.

Обработчик клика добавляйте на класс элемента, а внутри обработчика используется this или event.target.

Также для решения задачи Вам будет полезна информация из этой статьи.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы