Solucionado (ver solução)
Solucionado
(ver solução)
4
respostas

Exercício 3 - copiando valores - Não apaga valor da tag input

Prezados, boa noite!

Alguém poderia me esclarecer por que o código abaixo, apresentado como solução do exercício, não está copiando o valor do input para a tag span quando do clique do botão "copiar". Não teria que apagar o conteúdo após o clique?

<input class="frase"><button class="botao">Copiar</button><span class="copia"></span>

<script>
    var inputFrase = document.querySelector('.frase');
    var botao = document.querySelector('.botao');
    var copia = document.querySelector('.copia');

    function botaoHandler() {
                copia.textContent = inputFrase.value;
                inputFrase.value = '';
    }

    botao.addEventListener('click', botaoHandler);
 </script>
4 respostas
solução!

Funciona normalmente...

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>botao</title>
</head>
<body>
  <input class="frase"><button class="botao">Copiar</button><span class="copia"></span>

  <script>
  var inputFrase = document.querySelector('.frase');
  var botao = document.querySelector('.botao');
  var copia = document.querySelector('.copia');

  function botaoHandler() {
    copia.textContent = inputFrase.value;
    inputFrase.value = '';
  }

  botao.addEventListener('click', botaoHandler);
  </script>
</body>
</html>

E pra poder apagar o <input> ficou faltando um value="" assim:

<input value="" class="frase">

Transcrevi seu código ipsis literis para dentro de uma estrutura completa html e funcionou normalmente.

É sempre bom ter o html todo montado para teus testes

Valeu, Ricardo! Estava usando o trecho do exercício em outro código, por isso não estava dando certo. Quando executo o código sozinho funciona normalmente.

Obrigado.