2
respostas

textContent diretamente na variável

Não entendi muito bem como funciona o textContent, tentei agilizar o código definindo a própria variável lista diretamente com o atributo textContent mas não funcionou, gostaria de saber o motivo.

Segue o código do jeito que imaginei

Não entendi, vou passar o código, me explique novamente por que não funcionou

function adicionar() {
    let amigo = document.getElementById('nome-amigo').value;
    let lista = document.getElementById('lista-amigos').textContent;

    if(lista == ''){
        lista = amigo;
    } else {
        lista =+ ', ' + amigo;
    }
2 respostas

Oi!

Da forma que você fez, você não guardou na variável o elemento html e sim o textContent dele:

let lista = document.getElementById('lista-amigos').textContent;

Essa variável lista guarda apenas o texto (textContent) do elemento, então quando você muda o valor dela, está mudando apenas na variável e não no elemento html da página.

Para que a mudança seja feita na página, precisa acessar novamente o elemento html e atualizar o textContent dele:

document.getElementById('lista-amigos').textContent = lista;

Bons estudos!

Olá Fellipe!

você está buscando um elemento do mundo html para o javascript pelo id: document.getElementById('lista-amigos'); no caso a tag

que está vazio. Mas quando você usa o document.getElementById('lista-amigos').textContent; nessa situação você diz que quer o conteúdo e não a tag.

já aqui você está atribuído a variável um texto: lista.textContetc = amigo.value, ou seja injetando um texto dentro da tag

que está armazenada na let lista; são situações diferentes