Change "copy" to "copied" in Clipboard.js after click

Question

I am trying to make the Clipboard.js change the copy button from "COPY" to "COPIED" after clicking without losing the function it has that selects the target code.

Would anyone know how to do?

! function() {
  for (var a = document.getElementsByTagName("pre"), b = document.getElementById("paste-content"), c = 0; c < a.length; c++) {
    var d = a[c].children[0].className.indexOf("language-");
    if (0 === d) {
      var e = document.createElement("button");
      e.className = "copy-button", e.textContent = "COPY", a[c].appendChild(e)
    }
  }
  var f = new Clipboard(".copy-button", {
    target: function(a) {
      return a.previousElementSibling
    }
  })
}();

<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.7.1/clipboard.min.js"></script>


<pre class="input button border"><code class="language-less" id="dialog_coupon_code_1">CODE 1</code></pre>
<pre class="input button border"><code class="language-less" id="dialog_coupon_code_2">CODE 2</code></pre>
<pre class="input button border"><code class="language-less" id="dialog_coupon_code_3">CODE 3</code></pre>

Answer 1

To update the button, add a callback at the event success. This event will return (as parameter) the element clicked and with access to this element, you can change the value of the property innerHTML or textContent.

! function() {
  for (var a = document.getElementsByTagName("pre"), b = document.getElementById("paste-content"), c = 0; c < a.length; c++) {
    var d = a[c].children[0].className.indexOf("language-");
    if (0 === d) {
      var e = document.createElement("button");
      e.className = "copy-button", e.textContent = "COPY", a[c].appendChild(e)
    }
  }
  var f = new Clipboard(".copy-button", {
    target: function(a) {
      return a.previousElementSibling
    }
  })

  /* Adiciona o evento de sucesso */
  f.on('success', function(e) {

    /* Acessa o elemento (Botão) e altera o nome */
    e.trigger.innerHTML = "Copied!"

    /* Código Adcional para voltar o nome original */
    setTimeout(function() {
      e.trigger.innerHTML = "COPY"
      e.clearSelection();
    }, 3000);
  });

  /*
   * (Opcional)
   * Adiciona o evento de falha
   */
  f.on('error', function(e) {

    /* Acessa o elemento (Botão) e altera o nome */
    e.trigger.innerHTML = "Not Copied!";
    
    console.log( `Action: ${e.action}` );
    console.log( `Trigger: ${e.trigger}` );

    /* Código Adcional para voltar o nome original */
    setTimeout(function() {
      e.trigger.innerHTML = "COPY"
      e.clearSelection();
    }, 3000);
  });
}();

<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.7.1/clipboard.min.js"></script>

<pre class="input button border">
  <code class="language-less" id="dialog_coupon_code_1">CODE 1</code>
</pre>

<pre class="input button border">
  <code class="language-less" id="dialog_coupon_code_2">CODE 2</code>
</pre>

<pre class="input button border">
  <code class="language-less" id="dialog_coupon_code_3">CODE 3</code>
</pre>