Форум программистов, компьютерный форум, киберфорум
JavaScript для начинающих
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.91/11: Рейтинг темы: голосов - 11, средняя оценка - 4.91
0 / 0 / 0
Регистрация: 28.02.2021
Сообщений: 7

Создать несколько кнопок для копирования по клику.

28.02.2021, 10:22. Показов 2286. Ответов 2
Метки нет (Все метки)

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

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<?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>
0
Лучшие ответы (1)
IT_Exp
Эксперт
34794 / 4073 / 2104
Регистрация: 17.06.2006
Сообщений: 32,602
Блог
28.02.2021, 10:22
Ответы с готовыми решениями:

Не получается создать несколько кнопок/скриптов
Здравствуйте. Использую этот плагин -&gt; allwebs.ru/plugin, это кнопка, которая позволяет загружать изображение пользователям на сайт, на...

Создать массив кнопок, для каждой кнопок будет одинаковый обработчик
Всем привет! Нужна помощь в реализации такой задачи. Нужно создать массив кнопок, для каждой кнопок будет одинаковый обработчик...

Как через цикл создать программно несколько кнопок
Добрый день всем. Подскажите пожалуста как через цыкл создать програмно несколько кнопок? for( int i = 0; i &lt; 4; ++i ) { ...

2
220 / 173 / 115
Регистрация: 19.01.2015
Сообщений: 524
28.02.2021, 18:02
Лучший ответ Сообщение было отмечено geymer83 как решение

Решение

Потому что id должен быть уникальным, а у вас несколько кнопок и текстовых полей с одинаковыми. Нужно на классы переделать.
PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<?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="userButton">Копировать</button>
        <center><textarea class="copy">ссылка для копирования</textarea></center>
        ';
}
?>
<script>
    var button = document.querySelectorAll( '.userButton' );
 
    [].forEach.call( button, function ( el, i ) {
        el.onclick = function ( e ) {
            var ta = document.querySelectorAll( '.copy' );
            var range = document.createRange();
            range.selectNode( ta[ i ] );
            window.getSelection().addRange( range );
            try {
                document.execCommand( 'copy' );
            } catch ( err ) {
                console.log( 'Can`t copy, boss' );
            }
            window.getSelection().removeAllRanges();
        }
    } );
</script>
1
0 / 0 / 0
Регистрация: 28.02.2021
Сообщений: 7
28.02.2021, 21:48  [ТС]
Огромное спасибо, работает.
Двое суток голову ломал, а оказалось такое простое решение
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
BasicMan
Эксперт
29316 / 5623 / 2384
Регистрация: 17.02.2009
Сообщений: 30,364
Блог
28.02.2021, 21:48
Помогаю со студенческими работами здесь

Несколько событий для нескольких кнопок
Скажите пожалуйста, каким образом создать несколько событий &quot;mouseover&quot; и т.п. для нескольких кнопок программно? Т.е. что бы не прописывать...

Несколько кнопок на форме. Как сделать так, чтобы считывались действия с разных кнопок?
Задание: Составьте программу, позволяющую определять как общее количество пройденных гусеницей сантиметров, так и высоту, на которой она...

Как прописать в макросе несколько человек для копирования в определенный лист
Добрый вечер, уважаемые Программисты! Очень нужна ваша помощь. Подскажите, пожалуйста, как добавить в готовый макрос, еще 2-3 человека. ...

Использование горячих клавиш для кнопок в java
Собственно, как прикрутить горячие клавиши к уже имеющимся кнопкам на jPanel? На каждой кнопке висит ActionListener. button.setMnemonic...

Простенькие мини игры для stm32+несколько кнопок+Nokia LCD
Может есть у кого готовое, типа flappy bird чего-нить? http://www.youtube.com/watch?v=1Fw0Agg0CKo Желательно сразу под STM. ...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
3
Ответ Создать тему
Новые блоги и статьи
SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров
8Observer8 12.02.2026
Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .
SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image)
8Observer8 11.02.2026
Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .
SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image
8Observer8 10.02.2026
Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .
Установка Qt-версии Lazarus IDE в Debian Trixie Xfce
volvo 10.02.2026
В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .
SDL3 для Web (WebAssembly): Работа со звуком через SDL3_mixer
8Observer8 08.02.2026
Содержание блога Пошагово создадим проект для загрузки звукового файла и воспроизведения звука с помощью библиотеки SDL3_mixer. Звук будет воспроизводиться по клику мышки по холсту на Desktop и по. . .
SDL3 для Web (WebAssembly): Основы отладки веб-приложений на SDL3 по USB и Wi-Fi, запущенных в браузере мобильных устройств
8Observer8 07.02.2026
Содержание блога Браузер Chrome имеет средства для отладки мобильных веб-приложений по USB. В этой пошаговой инструкции ограничимся работой с консолью. Вывод в консоль - это часть процесса. . .
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве
8Observer8 02.02.2026
Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .
Философия технологии
iceja 01.02.2026
На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru