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

Por que assim não funciona? Parece ser a mesma coisa...

O gabarito é esse:

<meta charset="UTF-8">

<input/>
<button>Exibir texto digitado</button>

<script>
    var input = document.querySelector("input");

    function exibeTexto() {

        alert(input.value);
    }

    var button = document.querySelector("button");
    button.onclick = exibeTexto;
</script>

Eu tinha pensado no código abaixo antes de vê-lo: (Eu não sabia que podia colocar "input.value" direto no alert, então pensei em guardar input.value em uma variável "nome" e jogar esta variável no alert) Para mim, é exatamente a mesma coisa (só dei uma volta maior para fazer a mesma coisa...mas ok.) Porque não funcionou?

<meta charset="UTF-8">

<input/>
<button>Exibir texto digitado</button>

<script>
    var input = document.querySelector("input");
    var nome = input.value; 

    function exibeTexto() {

        alert(nome);
    }

    var button = document.querySelector("button");
    button.onclick = exibeTexto;
</script>

Obrigado, abraços.

2 respostas
solução!

O que acontece é que quando o navegador lê essa linha

    var nome = input.value;

O campo ainda está vazio, pois o navegador está carregando a página e não foi executada nenhuma ação.

Quando você pressiona o botão, ele vai pegar esse valor vazio e jogar na tela. Ele não mudará nunca pois você está com uma referência DO VALOR e não DO CAMPO.

Já no primeiro exemplo o código está com uma referência DO CAMPO, assim toda vez que ele chamar o alert do botão ele vai jogar o valor do campo naquele momento.

Faça o seguinte, jogue a variável que você criou DENTRO do método exibeTexto e veja o que acontece.

Orra, ótima explicação. Matou! Obrigado.