Помогите с отображением сообщения о копировании текста
Привет всем! Я начинающий разработчик и создаю сайт с мотивационными фразами. У меня есть страница с цитатами и кнопками копирования под каждой из них.
Все работает нормально, но пользователи не понимают, что текст скопирован. Мне нужно показывать сообщение “Скопировано” при нажатии на кнопку копирования.
Вот упрощенный пример моего кода:
const container = document.querySelector('.quotes-container');
const itemsPerPage = document.querySelector('select[name="items-count"]');
const currentPage = document.querySelector('input[name="current-page"]');
let quotesData = [];
const displayQuotes = () => {
container.innerHTML = '';
const quotesToShow = getPageData(quotesData, getItemsCount(), getCurrentPage());
const wrapper = document.createElement('div');
wrapper.innerHTML = quotesToShow.map(item =>
`<div class='quote-item'>
<p class='quote-text'>${item.text}</p>
<div>
<button class="copy-btn btn">Копировать</button>
<span class="copy-notification">Скопировано</span>
</div>
</div>`
).join('');
container.append(wrapper);
};
const loadQuotes = async () => {
return [
{ text: "Успех приходит к тем, кто не сдается." },
{ text: "Мечты сбываются у тех, кто в них верит." },
{ text: "Каждый день - новая возможность." },
{ text: "Будь собой, это твоя суперсила." }
];
};
document.querySelector('.quotes-container').addEventListener('click', function(event) {
if (event.target && event.target.matches('.copy-btn')) {
const textToCopy = event.target.parentNode.closest('.quote-item')
.querySelector('.quote-text').textContent;
const tempInput = document.createElement('textarea');
tempInput.value = textToCopy;
document.body.appendChild(tempInput);
tempInput.select();
document.execCommand('copy');
tempInput.remove();
}
});
Проблема в том, что элемент с уведомлением создается динамически через JavaScript, и я не могу понять, как сделать так, чтобы он показывался только при клике на соответствующую кнопку и исчезал через несколько секунд.
Как правильно реализовать показ и скрытие уведомления для каждой кнопки отдельно?