In this tutorial, I'll show you how to create a simple and effective way to copy text from multiple divs using individual buttons. Each button will allow users to copy the text from its corresponding div, and the button icon will change to a checkmark once the text is successfully copied. This can be particularly useful in situations where you want to allow users to easily copy code snippets, quotes, or any other content on your webpage.
How to do this is nicely explained in the accompanying video
button class:
copy-btn
Copy Contain ID:
The-Copy-1
HTML
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
text
<i class="fas fa-copy"></i> Copy Text 2
javascript
<script>
document.querySelectorAll('.copy-btn').forEach((button, index) => {
button.addEventListener('click', function() {
const divId = `The-Copy-${index + 1}`;
const icon = this.querySelector('i');
const textToCopy = document.getElementById(divId).innerText;
navigator.clipboard.writeText(textToCopy).then(() => {
icon.classList.remove('fa-copy');
icon.classList.add('fa-check');
}).catch(err => {
console.error("Failed to copy text.");
});
});
});const copyButtons = document.querySelectorAll('.copy-btn');copyButtons.forEach(button => {
button.addEventListener('mouseover', function() {
document.body.style.cursor = 'pointer';
});button.addEventListener('mouseout', function() {
document.body.style.cursor = 'default';
});
});
</script>
