Clipboard.JS How to make the new string to front with 'success' event?

Question

I'm using the 'success' event to change the button text after someone have clicked it.

The original button text is in span and it will be covered by the animation, so I use CSS rule: z-index and color to make the text visible and to the front.

The problem is the text will be hidden under the animation after the function is invoked because the new string is not in span anymore.

How do I make the new string in span so the CSS will still work to make it front?

Below is my code:

var clipboard = new ClipboardJS('.copyElement')

clipboard.on('success', function(e) {
    let oldtext = e.trigger.textContent
    e.trigger.textContent = 'Copied!'
    setTimeout(() => e.trigger.textContent = oldtext, 2000)
});

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 330px;
}

.copyElement {
  cursor: pointer;
}

.Big {
  width: 257px;
  padding: 33px 0 30px 0;
  font-size: 21px;
}

.Medium {
  width: 210px;
  padding: 27px 0 24px 0;
  font-size: 18px;
  margin: 30px 0;
}

.Small {
  width: 150px;
  padding: 21px 0 18px 0;
  font-size: 15px;
}

.ButtonMain {
  background-color: #e6e6e6;
  position: relative;
  overflow: hidden;
  border: none;
}

.ButtonMain::before,
.ButtonMain::after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.ButtonMain span {
  position: relative;
  color: #fff;
}

.ButtonMain:hover span {
  color: #000;
  transition: color 0.3s ease 0s;
}

.RedRevealEffect::before {
  content: '';
  background: #ef476f;
  width: 120%;
  left: -10%;
  transform: skew(30deg);
  transition: transform 0.4s cubic-bezier(0.3, 1, 0.8, 1);
}

.RedRevealEffect:hover::before {
  transform: translate3d(100%,0,0);
}

<button
  class="copyElement ButtonMain RedRevealEffect Small"
  data-clipboard-text="123"
>
  <span>Take Me There</span>
</button>
<button
  class="copyElement ButtonMain RedRevealEffect Medium"
  data-clipboard-text="456"
>
  <span>Take Me There</span>
</button>
<button
  class="copyElement ButtonMain RedRevealEffect Big"
  data-clipboard-text="789"
>
  <span>Take Me There</span>
</button>

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

Answer 1

Because the button's text lies inside the span. Use querySelector('span') to change the span's text

var clipboard = new ClipboardJS('.copyElement')

clipboard.on('success', function(e) {
    let span = e.trigger.querySelector('span')
    let oldtext = span.textContent
    span.textContent = 'Copied!'
    setTimeout(() => span.textContent = oldtext, 2000)
});

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 330px;
}

.copyElement {
  cursor: pointer;
}

.Big {
  width: 257px;
  padding: 33px 0 30px 0;
  font-size: 21px;
}

.Medium {
  width: 210px;
  padding: 27px 0 24px 0;
  margin: 30px 0;
}

.Small {
  width: 150px;
  padding: 21px 0 18px 0;
  font-size: 15px;
}

.ButtonMain {
  background-color: #e6e6e6;
  position: relative;
  overflow: hidden;
  border: none;
}

.ButtonMain::before,
.ButtonMain::after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.ButtonMain span {
  position: relative;
  color: #fff;
}

.ButtonMain:hover span {
  color: #000;
  transition: color 0.3s ease 0s;
}

.RedRevealEffect::before {
  content: '';
  background: #ef476f;
  width: 120%;
  left: -10%;
  transform: skew(30deg);
  transition: transform 0.4s cubic-bezier(0.3, 1, 0.8, 1);
}

.RedRevealEffect:hover::before {
  transform: translate3d(100%,0,0);
}

<button
  class="copyElement ButtonMain RedRevealEffect Small"
  data-clipboard-text="123"
>
  <span>Take Me There</span>
</button>
<button
  class="copyElement ButtonMain RedRevealEffect Medium"
  data-clipboard-text="456"
>
  <span>Take Me There</span>
</button>
<button
  class="copyElement ButtonMain RedRevealEffect Big"
  data-clipboard-text="789"
>
  <span>Take Me There</span>
</button>

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