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

Duas dúvidas

Fiquei com duas dúvidas nesta aula:

1 - Porque na declaração das variáveis eu já não posso chamar o .value e o .textoContent? Tentei fazer dessa forma e não funciona. Em outro exercício foi feito assim e funcionou.

Está assim:

    let amigo = document.getElementById("nome-amigo");
    let lista = document.getElementById("lista-amigos");

Porque não funciona desta forma?

    let amigo = document.getElementById("nome-amigo").value;
    let lista = document.getElementById("lista-amigos").textContent;

Se funcionasse dessa forma iria ficar com bem menos repetições em nosso código.

2 - A outra dúvida é porque chamamos o VALUE na variável amigo e não o TEXTCONTENT? Em um desafio anterior nós chamamos o value, no elemento que tinha uma tag value em seu código, e o textContent para buscar o conteúdo de texto de um elemento que não tinha esta tag.

Pois bem, neste caso o elemento não tem uma tag value, mas se chamarmos o textContent não funciona, só funciona com o value.

            <input id="nome-amigo" class="form__input" type="text" placeholder="Nome do amigo">

Agradeço desde já pela atenção.

att, Turí Souza

2 respostas
solução!

Olá, Turí! Como vai? Vou tentar esclarecer suas dúvidas, vamos lá.

1 - Sobre a declaração das variáveis, a diferença entre as duas formas que você mencionou está no momento em que o JavaScript tenta acessar o valor ou o conteúdo de texto do elemento.

No primeiro exemplo:

let amigo = document.getElementById("nome-amigo");
let lista = document.getElementById("lista-amigos");

Você está apenas armazenando a referência para os elementos HTML em variáveis. Nesse caso, o valor ou o conteúdo de texto desses elementos pode ser acessado a qualquer momento depois disso, inclusive alterado várias vezes.

No segundo exemplo:

let amigo = document.getElementById("nome-amigo").value;
let lista = document.getElementById("lista-amigos").textContent;

Você está tentando acessar o valor ou o conteúdo de texto do elemento imediatamente. Isso significa que, se o valor ou o conteúdo de texto do elemento mudar depois disso, a variável não será atualizada automaticamente. Em outras palavras, você está armazenando o valor ou conteúdo de texto do elemento no momento da declaração da variável.

Portanto, se você tentar usar a segunda forma em um cenário onde o valor ou o conteúdo de texto do elemento muda ao longo do tempo (como é o caso do seu exercício), você pode encontrar problemas.

2 - Sobre a sua segunda dúvida, o método .value é usado para pegar o valor de elementos de entrada (input, select, textarea), enquanto o .textContent é usado para pegar o conteúdo de texto de um elemento HTML. No seu caso, o elemento com id "nome-amigo" é um campo de entrada (input), por isso usamos .value para pegar o valor digitado pelo usuário.

No entanto, o elemento com id "lista-amigos" não é um campo de entrada, é uma div que está sendo usada para exibir texto. Por isso, usamos .textContent para alterar o conteúdo de texto dessa div.

Espero ter ajudado e bons estudos!

Muito grato! Esclareceu!