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

Quando declaro 'nome-amigo' = '' não limpa o campo "Digite o nome de um amigo"

Olá, fiz o início do exercício de forma um pouco diferente do mostrado no vídeo, na function adicionar( ). Gostaria de saber por que minha declaração de nomeAmigo = ' ' não está limpando o campo como mostra no vídeo, no meu entendimento parece estar correto o código mas ainda assim não funciona:

let listaAmigos = [];

function adicionar() {
    let nomeAmigo = document.getElementById('nome-amigo').value;
    listaAmigos.push(nomeAmigo);
    
    document.getElementById('lista-amigos').innerHTML = listaAmigos;

    nomeAmigo = '';

}
2 respostas
solução!

Olá Lucas!

Entendi sua dúvida e vamos tentar resolver isso juntos. O problema está na forma como você está tentando limpar o campo de input. No seu código, você está atribuindo uma string vazia à variável nomeAmigo, mas isso não afeta o campo de input no HTML. Para limpar o campo de input, você precisa acessar o elemento diretamente e definir seu valor como uma string vazia.

Aqui está uma versão corrigida do seu código:

let listaAmigos = [];

function adicionar() {
    let nomeAmigo = document.getElementById('nome-amigo').value;
    listaAmigos.push(nomeAmigo);
    
    document.getElementById('lista-amigos').innerHTML = listaAmigos.join(', ');

    // Aqui está a correção: limpar o campo de input diretamente
    document.getElementById('nome-amigo').value = '';
}

Explicando as mudanças:

  1. document.getElementById('lista-amigos').innerHTML = listaAmigos.join(', '); - Usei join(', ') para exibir os nomes separados por vírgulas.
  2. document.getElementById('nome-amigo').value = ''; - Esta linha é a chave para limpar o campo de input. Em vez de atribuir uma string vazia à variável nomeAmigo, estamos acessando o campo de input diretamente e definindo seu valor como uma string vazia.

Espero ter ajudado e bons estudos!

Obrigado Rodrigo! Realmente deu tudo certo aqui. Só uma curiosidade, antes de colocar o .join(', ') o JS já estava colocando vírgulas entre os nomes porém sem os espaços após as vírgulas.