Alguma ideia de como fazer o botao copiar funcionar?
const btnCopiar = document.querySelector(".btn-copiar");
btnCopiar.addEventListener("click", copiar = () => {
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Solucionado
Alguma ideia de como fazer o botao copiar funcionar?
const btnCopiar = document.querySelector(".btn-copiar");
btnCopiar.addEventListener("click", copiar = () => {
Olá, Ana, tudo bem?
Primeiramente, destaco que precisaremos ter códigos tanto no arquivo HTML quanto no arquivo JavaScript para fazer o botão de cópia funcionar.
No HTML necessitamos de um campo de entrada <input> com um ID texto e um valor padrão definido. Abaixo, temos um botão com a classe btn-copiar que será usado para acionar a função de cópia.
<input type="text" id="textoParaCopiar" value="Texto a ser copiado">
<button class="btn-copiar">Copiar</button>
<script src="app.js"></script>
Já o JavaScript podemos ter algo como:
const btnCopiar = document.querySelector(".btn-copiar");
const textoParaCopiar = document.getElementById("textoParaCopiar");
btnCopiar.addEventListener("click", async () => {
try {
await navigator.clipboard.writeText(textoParaCopiar.value);
alert("Texto copiado: " + textoParaCopiar.value);
} catch (err) {
console.error('Erro ao copiar texto: ', err);
}
});
No código acima texto dentro do input é copiado para a área de transferência utilizando o Clipboard quando o botão é clicado. Se a operação for bem sucedida, um alerta é exibido. Caso contrário, um erro é logado no console.
É possível ser necessário fazer adaptações no seu código. Mas você pode se inspirar nesse código e fazer alterações necessárias.
Espero ter ajudado e bons estudos!
Nossa muito obrigada Monalisa. Entendi!!! Excelente explicação.