Quiero configurar la función setTimeout en el botón Copiar de modo que si el usuario hace clic en Copiar, el texto se " copiará " y luego volverá a "Copiar" después de 3-4 segundos. por favor, ayúdenme a resolver este problema y también ayúdenme a hacerlo más liviano js.
A continuación se muestra mi código html
<blockquote> <p id="myInput">Lines of code Here</p> <button id="btn1">Copy</button> </blockquote>codigo js
<script> function copyFunction() { const copyText = document.getElementById("myInput").textContent; const textArea = document.createElement('textarea'); textArea.textContent = copyText; document.body.append(textArea); textArea.select(); document.execCommand("copy"); btn1.innerText = "copied"; textArea.remove(); } document.getElementById('btn1').addEventListener('click', copyFunction); </script>En jquery es así.
$(document).ready(function(){ $('button#btn1').click(function(){ $("#btn1").text("Copied"); setTimeout(function() { $("#btn1").text("Copy"); }, 3000); }); }); <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <blockquote> <p id="myInput">Lines of code Here</p> <button id="btn1">Copy</button> </blockquote>Solo un puntero, en su código hace referencia a btn1 como variable, pero no ha mostrado dónde se declara como variable:
function copyFunction() { const copyText = document.getElementById("myInput").textContent; const textArea = document.createElement('textarea'); textArea.textContent = copyText; document.body.append(textArea); textArea.select(); document.execCommand("copy"); btn1.innerText = "copied"; <-------- where is btn1 coming from? textArea.remove(); }De todos modos, es bastante simple, algo como esto podría funcionar, en vainilla JS:
<!-- html --> <p id="myInput">Lines of code Here</p> <button id="btn1">Copy</button> <!-- js --> <script> function copyFunction(btn) { const copy = () => { const copyText = document.getElementById("myInput").textContent; const textArea = document.createElement('textarea'); textArea.textContent = copyText; document.body.append(textArea); textArea.select(); document.execCommand("copy"); btn.innerText = "Copied!"; textArea.remove(); } const reset = () => { setTimeout(() => {btn.innerText = 'Copy'}, 3000); } copy() reset() } const btn = document.getElementById('btn1'); btn.addEventListener('click', () => copyFunction(btn)); </script>