Entrar Ainda não tem acesso?
1
resposta

[Dúvida] Tenho duvida no exercicio 1

Referente ao curso Lógica de programação: praticando com desafios, no capítulo Projeto Amigo Secreto e atividade Desafio: hora da prática

por Nickolas Lisboa Moço dos Reis
| 47.4k xp | 9 posts

Olá, estou tentando fazer com que a função atualizarLista(), em vez de quebrar a linha (pois está acontecendo isso ao executar o codigo), separar os itens da lista por meio de virgulas igual a esse trecho de codigo do adicionar()

JS

listaAmigos.textContent = listaAmigos.textContent + ", " + nomeAmigo;

mas não estou conseguindo. Tentei de tudo e não levou a nada =(

JS

function atualizarLista() {
    let listaAmigos = document.getElementById('lista-amigos');
    listaAmigos.innerHTML = '';

    for (let i = 0; i < arrayNomesSorteadores.length; i++) {
        let paragrafo = document.createElement('p');
        paragrafo.textContent = arrayNomesSorteadores[i];
       
        paragrafo.addEventListener('click', function() {
            excluirAmigo(i);
        });
        
        listaAmigos.appendChild(paragrafo);
    }
}

tentei até mesmo realizar uma alteração no CSS para manter os itens na mesma linha e até que mantem os itens na mesma linha, mas quando tento adicionar a separação por virgulas no JS, não funciona

CSS

#lista-amigos{
  display: flex;
  flex-wrap:wrap;
}

Ficarei muito agradecido se me ajudarem quanto a isso

1 resposta
por Armano Barros Alves Junior
| 2314.4k xp | 4752 posts
Alura Scuba Team Monitor | Suporte Educacional

Olá, Nickolas! Tudo joia?

Vamos tentar uma abordagem diferente. Em vez de criar um elemento 'p' para cada nome, você pode criar uma string com todos os nomes separados por vírgulas e depois atribuir essa string ao textContent de listaAmigos. Aqui está um exemplo de como você pode fazer isso:

function atualizarLista() {
    let listaAmigos = document.getElementById('lista-amigos');
    listaAmigos.innerHTML = '';

    let nomes = arrayNomesSorteadores.join(', ');

    listaAmigos.textContent = nomes;
}

No código acima, o método join() é usado para criar uma string com todos os nomes em arrayNomesSorteadores, separados por vírgulas. Depois, essa string é atribuída ao textContent de listaAmigos.

Porém, ao fazer isso, você perderá a funcionalidade de clicar em um nome para removê-lo da lista, já que não estamos mais criando elementos 'p' individuais para cada nome. Para manter essa funcionalidade, você teria que implementar uma lógica diferente, talvez usando o método split() para transformar a string de volta em um array quando um nome for clicado, remover o nome do array e então chamar atualizarLista() novamente.

Espero ter ajudado e bons estudos!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓.