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

Seletor document e variável

Referente ao curso Lógica de programação: praticando com desafios, no capítulo Projeto Carrinho de Compras e atividade Calculando valor total do carrinho

por Pedro Ernesto Silva da Cunha
| 160.2k xp | 180 posts

Olá, os instrutores precisaram atribuir zero à quantidade no carrinho. No entanto, ao invés de utilizar a variável 'quantidade', eles optam por acessar novamente o valor de document.getElementById('quantidade').value, que é exatamente o mesmo valor atribuído à variável quantidade no início da função. Gostaria de entender o motivo pelo qual a variável quantidade não está funcionando neste caso. Sendo que, na minha função limpar eu fiz isso: 

function limpar(){
    var qtd = document.getElementById('quantidade');
    var mostraValor = document.getElementById('valor-total');
    var mostraProdutos = document.getElementById('lista-produtos')

    qtd.textContent = '0'
    mostraValor.textContent = 'R$0'
    valorTotal = 0;
    mostraProdutos.innerHTML = '<span class="texto-azul">Não há nenhum produto na lista</span>'
}
3 respostas
por Armano Barros Alves Junior
| 2322.2k xp | 4771 posts
Alura Scuba Team Monitor | Suporte Educacional

Olá, Pedro! Tudo certo?

A razão pela qual os instrutores utilizaram document.getElementById('quantidade').value = 0; em vez de simplesmente atribuir zero à variável quantidade é porque eles queriam limpar o campo de entrada da quantidade na interface do usuário, e não apenas alterar o valor da variável.

Quando você faz quantidade = 0;, você está apenas alterando o valor da variável quantidade no código JavaScript, mas isso não tem efeito sobre o campo de entrada da quantidade na interface do usuário. Por outro lado, quando você faz document.getElementById('quantidade').value = 0;, você está alterando o valor que está sendo exibido no campo de entrada da quantidade na interface do usuário.

No seu caso, você está alterando o textContent da variável qtd, que é equivalente a document.getElementById('quantidade'). Isso não vai funcionar, porque textContent é usado para alterar o conteúdo de texto de um elemento, e não o valor de um campo de entrada. Para campos de entrada, você deve usar .value para alterar ou obter o valor.

Então, no seu código, você deve alterar a linha qtd.textContent = '0' para qtd.value = '0'.

Espero ter ajudado e bons estudos!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓.
por Pedro Ernesto Silva da Cunha
| 160.2k xp | 180 posts

Ou seja, se eu fizer : var qtd = document.getElementById('quantidade').value = 0; Ou: qtd.value = '0'; Dá no mesmo? Eu fiquei confuso pois achei que a cariável qtd era igual a 'document.getElementById('quantidade'); '., já que ela está armazenando o seletor.

solução!
por Armano Barros Alves Junior
| 2322.2k xp | 4771 posts
Alura Scuba Team Monitor | Suporte Educacional

Opa Pedro! Desculpe-me se ainda te deixei confuso.

A diferença entre document.getElementById('quantidade').value e document.getElementById('quantidade').textContent está relacionada ao tipo de elemento HTML ao qual você está se referindo.

  1. document.getElementById('quantidade').value:

    • Usado principalmente para elementos de entrada interativos, como campos de texto, caixas de seleção, e assim por diante.
    • Retorna o valor atual do elemento de entrada. Por exemplo, se você estiver lidando com um campo de texto, value retornará o texto digitado pelo usuário.

    Exemplo com campo de texto:

    var valorDigitado = document.getElementById('quantidade').value;

  2. document.getElementById('legenda').textContent:

    • Usado para obter ou definir o conteúdo textual de um elemento.
    • Funciona bem com elementos que têm conteúdo de texto, como parágrafos (<p>), cabeçalhos (<h1>, <h2>, etc.) ou qualquer outro elemento que contenha texto.

    Exemplo com um elemento de parágrafo:

    var textoDoParagrafo = document.getElementById('legenda').textContent;

Portanto, a escolha entre value e textContent depende do tipo de elemento HTML com o qual você está lidando e do que você deseja obter ou definir. Se você estiver manipulando um campo de entrada, use value; se estiver manipulando conteúdo de texto, use textContent.

Espero ter esclarecido esse ponto!