vendredi 2 juillet 2021

Javascript, change Icon to another Icon (setTimeout)

Dear StackOverflow Community,

I recently had this code to have a button that copies the URL to the clipboard. It had a text displayed on the button ("copy") and after clicking on the button the text turned to "kopiert" ("copied"). 2 seconds later it turned back. Now I changed the originalText to an Icon. The problem is, that the icon turns into the old "kopiert" text and after 2 Seconds it turns to the originalText. But the Icon is not a text anymore, so it turns to nothing. How can I change that, so it turns back to the Icon again? Also I would like to replace the "kopiert" text to the same icon, but the icon is a little more bigger.

Really appreciate any help!

Code:

<div class="background">
<center>
  <button class="clipboard"><i class="fas fa-copy"></i></button>
</center>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
var $temp = $("<input>");
var $url = $(location).attr('href');

$('.clipboard').on('click', function() {
    const originalText = $('.clipboard').text();
    
    $("body").append($temp);
    $temp.val($url).select();
    document.execCommand("copy");
    $temp.remove();
    $('.clipboard').text("kopiert!");

    // Run something in 2 seconds to revert back to the button's text
    setTimeout(function() { 
        $('.clipboard').text(originalText);
    }, 2000); // 2 seconds
    
})
    
</script>



Aucun commentaire:

Enregistrer un commentaire