Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

[Dúvida] Não entendi a função de limpar campo

Referente ao curso Lógica de programação: explore funções e listas, no capítulo Reiniciando o jogo e atividade Botão reiniciar

por Júlio César Dantas Oliveira Paiva
| 4.4k xp | 25 posts

Na aula colocam a função de limpar campo assim:

function limparCampo() {
    chute = document.querySelector('input');
    chute.value = ' ';
}

Tenho uma dúvida quanto a isso:

Já havia sido definido no início que a variável chute seria: chute = document.querySelector('input').value;. Portanto, por que na aula eles quebram a variável chute em duas coisas? Assim:chute = document.querySelector('input'); e depois na outra linha coloca chute.value = ' ';. Não seria melhor colocar: 

function limparCampo() {
    chute = ' ';
{

Ou então:

function limparCampo() {
    document.querySelector('input') = ' ';
}

Na minha cabeça não fez sentido, porque a variável já havia sido definida antes, então por que iria quebrar em duas e mudar o valor original dela? Pois antes a variável chute era document.querySelector('input').value , ai depois ela virou document.querySelector('input'). Na minha cabeça tá meio bagunçado, ficar mudando o valor de uma variável que foi declarado fora de uma função inicialmente. Espero ter me feito entendido.

2 respostas
por Renan Lima
| 4231.7k xp | 9015 posts
Alura Scuba Team Apoio Educacional - Alura

Olá, Júlio. Tudo bem?

Muito bom seu questionamente, e tentar entender o código, continue assim!

Na função limparCampo, o objetivo é limpar o valor do campo de entrada, ou seja, o que foi digitado pelo usuário. O que acontece é que, inicialmente, a variável chute é usada para armazenar o valor do campo de entrada, mas dentro da função limparCampo, ela é reutilizada para referenciar o próprio elemento HTML do input.

A razão para isso é que, para modificar o valor de um campo de entrada, você precisa acessar o elemento HTML e, em seguida, alterar sua propriedade value. Por isso, a função é dividida em duas etapas:

  1. chute = document.querySelector('input'); - Aqui, chute passa a referenciar o elemento input em si, não apenas o valor contido nele.
  2. chute.value = ''; - Agora que chute refere-se ao elemento, você pode acessar sua propriedade value e definir como uma string vazia, limpando o campo de entrada.

Se você tentasse usar chute = ' '; ou document.querySelector('input') = ' ';, isso não funcionaria porque essas abordagens não estão acessando e modificando a propriedade value do elemento input. Elas tentariam redefinir a variável ou o elemento, o que não é possível da maneira que você descreveu.

Espero ter ajudado.

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓.Bons Estudos!
solução!
por Vinicius de Oliveira Giuliani
| 49k xp | 8 posts
Desenvolvedor Full Stack

Uma questão que deve ser observada é que a variável chute dentro de verificarChute, e a variável chute dentro de limparCampo são variáveis diferentes. No JavaScript, existe separação de escopos em funções, e dessa forma as funções podem ter variáveis com o mesmo nome, mas que não afetam a outra.

O instrutor erroneamente tentou reutilizar uma variável no escopo de verificarChute em limparCampo, e o JavaScript interpretou como uma variável sem declaração. Quando uma variável não é declarada (e o código não está sendo executado usando o strict mode), ela é colocada no escopo global. Assim, passam a existir 2 variáveis com o nome chute nesse ambiente: uma no escopo global, e uma no escopo da função verificarChute. Caso o código estivesse sendo executado em strict mode, ocorreria um erro de "variável não declarada" e a execução do código seria interrompida.

De qualquer maneira, pessoalmente eu não usaria o nome "chute", pois ele se refere à escolha do jogador, e não ao elemento específico no HTML. Eu prefiro declarar a variável campo, e o código ficaria assim:

function limparCampo() {
    let campo = document.querySelector('input');
    campo.value = '';
}