Tengo este código CLIC PARA COPIAR que te ayudaría a copiar un texto al portapapeles. ¿Cómo creo varias instancias de este CLIC PARA COPIAR diferente en la misma página?
Aquí está el código que ya tengo.
<p><strong>NOTE:</strong> Ensure you properly copy text:</p> <input type="text" value="12sDKsfHXYFKKshjBQZEVmQo4EBmDBvzY7" id="myInput" readonly><br><br> <div class="tooltip"> <button onclick="myFunction()" onmouseout="outFunc()"> <span class="tooltiptext" id="myTooltip">Copy to clipboard</span> Copy Address </button> </div> <script> function myFunction() { var copyText = document.getElementById("myInput"); copyText.select(); copyText.setSelectionRange(0, 99999); document.execCommand("copy"); var tooltip = document.getElementById("myTooltip"); //tooltip.innerHTML = "Copied: " + copyText.value;// tooltip.innerHTML = "Copied: "; } function outFunc() { var tooltip = document.getElementById("myTooltip"); tooltip.innerHTML = "Copy to clipboard"; } </script>Intento agregar más instancias del código para poder crear más botones HAGA CLIC PARA COPIAR en la misma página cambiando el valor del texto. Pero sigue seleccionando solo el primer texto.
Si elimina los atributos de ID y asigna un padre común a los elementos que se muestran aquí, puede usar otras técnicas de navegación DOM para identificar piezas de código con bastante facilidad.
El HTML del original está envuelto en un span : el lapso no afectará la presentación, pero permite el uso para acceder a la propiedad parentNode de un elemento y desde allí se pueden realizar otras selecciones.
document.querySelectorAll('.tooltip button').forEach(bttn=>bttn.addEventListener('click',function(e){ /* within this function `this` refers to the button */ let input=this.parentNode.parentNode.querySelector('input'); input.select(); input.setSelectionRange(0, input.value.length); document.execCommand('copy'); this.parentNode.innerHTML="Copied: " + input.value; })) div.copy{ display:inline; } <div class='copy'> <p><strong>NOTE:</strong> Ensure you properly copy text:</p> <input type="text" value="12sDKsfHXYFKKshjBQZEVmQo4EBmDBvzY7" readonly /> <div class="tooltip"> <button> <span class="tooltiptext">Copy to clipboard</span> </button> </div> </div> <div class='copy'> <p><strong>NOTE:</strong> Ensure you properly copy text:</p> <input type="text" value="12sDKsfsdfsdfHXghjghjVmQo4EBmDBvzY7" readonly /> <div class="tooltip"> <button> <span class="tooltiptext">Copy to clipboard</span> </button> </div> </div> <div class='copy'> <p><strong>NOTE:</strong> Ensure you properly copy text:</p> <input type="text" value="1xxxswerHXYFKKshj56fgh8Qo4EBmDBvzY7" readonly /> <div class="tooltip"> <button> <span class="tooltiptext">Copy to clipboard</span> </button> </div> </div>