Clipboard.js循环按钮

Question

I use clipboard.js and after a click on one of my buttons I want to show a success message under the button, but I am not able to loop throught.

This is the button:

<button type="button" class="clipboard-button button-rect" data-clipboard-text="{{ site.author.email|safe_email }}">
  <span class="button-text">Get in touch</span>
  <span class="clipboard-message">My E-Mail has been copied</span>
</button>

And this the js:

var clipboard = new ClipboardJS('.clipboard-button');

clipboard.on('success', function () {
    var message = document.querySelectorAll('.clipboard-message');
    message.style.opacity = '1';
    setTimeout(function () {
        message.style.opacity = '0';
    }, 2000);
});

I want to show the message under the button which was pressed and not for every button.

I would appreciate your help, I tried so much. I'm an JS beginner btw, so be patient please. :)

Answer 1

On thing you should look at is achieving to retrieve the clicked DOM element (a button in this case). It will then be easy to find the corresponding .clipboard-message span element.

To retrieve the clicked element you can use the parameter given to the success event callback function, like stated here: https://clipboardjs.com/#events

Then your JavaScript code becomes:

var clipboard = new ClipboardJS('.clipboard-button');

clipboard.on('success', function (e) {
    // e.trigger corresponds to the clipboard-button DOM element that triggered the event
    // You can then use querySelector(...) to retrieve to first child element with the class clipboard-message
    var message = e.trigger.querySelector('.clipboard-message');
    message.style.opacity = '1';
    setTimeout(function () {
        message.style.opacity = '0';
    }, 2000);
});

Here is a working code snippet for you to try:

 var clipboard = new ClipboardJS('.clipboard-button'); clipboard.on('success', function (e) { var message = e.trigger.querySelector('.clipboard-message'); message.style.opacity = '1'; setTimeout(function () { message.style.opacity = '0'; }, 2000); }); 

 .clipboard-message { color: green; opacity: 0; } 

 <script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script> <button type="button" class="clipboard-button button-rect" data-clipboard-text="{{ site.author.email|safe_email }}"> <span class="button-text">Get in touch</span> <span class="clipboard-message">My E-Mail has been copied</span> </button> <button type="button" class="clipboard-button button-rect" data-clipboard-text="{{ site.author.email|safe_email }}"> <span class="button-text">Here is your ID</span> <span class="clipboard-message">My ID has been copied</span> </button>