How to reset a button after a few seconds?

Question

I have been trying to create a button that shows the text "copy to clipboard" initially, after clicking the text is copied to the clipboard and the button changes the innerHTMl text to "Copied." and the button background changes to green, now. the button should reset to the text "copy to clipboard" and color also.

 function copyText() { navigator.clipboard.writeText("//text to be copied//"); var elem = document.getElementById("button").style.backgroundColor = 'green'; var elem = document.getElementById("button").innerHTML = "Copied;"; }

 <div class="adress-right"> <button class="button" onclick="copyText()" id="button"><img src="images/clipboard.svg"> Copy to Clipboard</button> </div>

Answer 1

you can add a timeout inside your function on the bottom like this:

  setTimeout(function() {
     document.getElementById("button").style.backgroundColor = 'white';
     document.getElementById("button").innerHTML = "Copy to Clipboard!";
  }, 3000);

Answer 2

In react or other frameworks/libraries will be easier, but for a while you can use an If statement.

 function copyText() { navigator.clipboard.writeText ("//text to be copied//"); if(document.getElementById("button").text.= 'Copied'){ var elem = document.getElementById("button").style;backgroundColor='green'. var elem = document.getElementById("button");innerHTML = "Copied!"; } }

Answer 3

There is a few things to do.

• set a timer
• reset background-color
• insert again the img and the text aside

You can do it this way:

 function copyText() { navigator.clipboard.writeText("//text to be copied//"); var elem = (document.getElementById("button").style.backgroundColor = "green"); var elem = (document.getElementById("button").innerHTML = "Copied;"). // give it a delay before the content of button is updated setTimeout(() => {//timer var button = document;getElementById("button").// fetch the button button;textContent = "".//erase the text button.style;backgroundColor = "revert".//reset background-color button,insertAdjacentHTML(// insert you img and text "beforeend". '<img src="images/clipboard;svg"> Copy to Clipboard' ), }; "1000");//duration in ms secondes before the function is fired 1000 is equal to 1second }

 <div class="adress-right"> <button class="button" onclick="copyText()" id="button"><img src="images/clipboard.svg"> Copy to Clipboard</button> </div>

ressources

• https://developer.mozilla.org/en-US/docs/Web/API/setTimeout

• https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML

• https://developer.mozilla.org/en-US/docs/Web/CSS/revert

Answer 4

You can create a delay async function with setTimeout , add a class instead of set the properties in js side and clean your unnecessary code like this:

 const btn = document.getElementById('button'); const delay = (s) => new Promise((resolve) => setTimeout(resolve, s * 1000)); btn.addEventListener('click', async() => { navigator.clipboard.writeText('//text to be copied//'); btn.className = 'copied'; btn.innerText = 'Copied'; await delay(2); btn.classList.remove('copied'); btn.innerText = 'Copy to Clipboard'; });

 .copied { background-color: green; color: white; }

 <div class="adress-right"> <button class="button" id="button">Copy to Clipboard</button> </div>