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

[Dúvida] Desafio amigo secreto

Boa tarde, estou na parte de criar uma função para sortear o amigo no jogo, mas não estou conseguindo compreender a lógica 100%, sei que a função não está correta mas não sei o que é, também não sei o que colocar no document.getElementById('amigo').innerHTML coloquei o id 'amigo' pois é o id onde sai os nomes adicionados a lista, acabei supondo que era no mesmo lugar que deveria sair o resultado também, também não sei o que deveria por nessa concatenação infelizmente O Amigo sorteado foi:${}

let nomesDosAmigos = [];

function adicionarAmigo() {
    let nomes = document.getElementById('amigo').value;
    
    if (nomes === '') {
        alert('Por favor, insira um nome.');
    } else {
        nomesDosAmigos.push(nomes);
        console.log(nomesDosAmigos)// Para verificar se o nome foi adicionado
        limparCampo();
        atualizarLista();
    }
}
function limparCampo () {
   let nomes = document.getElementById('amigo');
   nomes.value = '';
}
function atualizarLista() {
    const lista = document.getElementById('listaAmigos')
    lista.innerHTML = ""
    for (let contador = 0; contador < nomesDosAmigos.length; contador++) {
        const item = document.createElement('li'); 
        item.textContent = nomesDosAmigos[contador];
        lista.appendChild(item);
    }
}
function sortearAmigo(nomesDosAmigos){
    if (nomesDosAmigos.length === 0) {
        alert ('A lista está vazia, adicione amigos antes de sortear.')
    }
    const indiceAleatorio = Math.floor(Math.random()* nomesDosAmigos.length);
    return nomesDosAmigos[indiceAleatorio];
    document.getElementById('amigo').innerHTML = `O Amigo sorteado foi:${}`;
}
4 respostas

Oii Diego!

Você poderia, por favor, também compartilhar o seu HTML completo? Assim posso ver se não tem algo errado nele também e posso testar o seu código por completo.

Fico no aguardo.

Um abraço

Boa tarde, segue HTML, vou colocar aqui também o repositório do github caso seja mais fácil pra você pegar por ele, só que la o código JS não está tão desenvolvido. https://github.com/DiegoSantosOP/Desafio-amigo-secreto

HTML

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;400;700;900&family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&display=swap" rel="stylesheet">
    <title>Amigo Secreto</title>
</head>

<body>
    <main class="main-content">
        <header class="header-banner">
            <h1 class="main-title">Amigo Secreto</h1>
            <img src="assets/amigo-secreto.png" alt="Imagem representativa de amigo secreto">
        </header>
        
        <section class="input-section">
            <h2 class="section-title">Digite o nome dos seus amigos</h2>
            <div class="input-wrapper">
                <input type="text" id="amigo" class="input-name" placeholder="Digite um nome">
                <button class="button-add" onclick="adicionarAmigo()">Adicionar</button>
            </div>
           
            <ul id="listaAmigos" class="name-list" aria-labelledby="listaAmigos" role="list"></ul>
            <ul id="resultado" class="result-list" aria-live="polite"></ul>

            <div class="button-container">
                <button class="button-draw" onclick="sortearAmigo()" aria-label="Sortear amigo secreto">
                    <img src="assets/play_circle_outline.png" alt="Ícone para sortear">
                    Sortear amigo
                </button>
            </div>
        </section>
    </main>

    <script src="app.js" defer></script>
</body>
</html>
solução!

Oii!, obrigada por compartilhar o repositório, de fato ajudou bastante.

Vou ajustar a lógica e explicar os pontos necessários para que sua função de sorteio funcione corretamente. Vou organizar o que você precisa:

Lógica para sortear um amigo: Você deve usar a função Math.random() para selecionar um índice aleatório dentro do array nomesDosAmigos. Exibição do resultado no lugar correto: O document.getElementById('amigo').innerHTML não é apropriado porque o elemento com ID amigo é um campo de texto. O resultado deve aparecer em um local dedicado, como no ID resultado que você já criou no HTML. Concatenar o nome do sorteado: Você precisa usar a interpolação de strings com template literals (as crases ``).

Código atualizado com as melhorias:

let nomesDosAmigos = [];

function adicionarAmigo() {
    let nomes = document.querySelector('#amigo').value;

    if (nomes === '') {
        alert('Por favor, insira um nome.');
    } else {
        // adiciona o nome ao array
        nomesDosAmigos.push(nomes);

        // atualiza a lista na interface
        atualizarLista();

        // limpa o campo de entrada
        limparCampo();
    }
}

function limparCampo() {
    let nomes = document.querySelector('#amigo');
    nomes.value = '';
}

function atualizarLista() {
    let lista = document.querySelector('#listaAmigos');
    lista.innerHTML = ''; // limpa a lista para evitar duplicações

    // adiciona os nomes na lista
    nomesDosAmigos.forEach((nome) => {
        let item = document.createElement('li');
        item.textContent = nome;
        lista.appendChild(item);
    });
}

function sortearAmigo() {
    if (nomesDosAmigos.length === 0) {
        alert('Nenhum nome foi adicionado à lista.');
        return;
    }

    // sorteia um índice aleatório do array
    let indiceSorteado = Math.floor(Math.random() * nomesDosAmigos.length);

    // pega o nome correspondente ao índice
    let amigoSorteado = nomesDosAmigos[indiceSorteado];

    // exibe o resultado na seção com ID "resultado"
    let resultado = document.querySelector('#resultado');
    resultado.innerHTML = `<li>O Amigo sorteado foi: <strong>${amigoSorteado}</strong></li>`;
}

Vamos ver o que mudou e por quê:

Função atualizarLista: atualiza dinamicamente a lista dos amigos exibida no ID listaAmigos. Isso melhora a interação visual. Função sortearAmigo: agora verifica se há nomes no array antes de sortear, evitando erros, e utiliza Math.random() pra gerar um índice aleatório. Inserção de resultado: exibe o resultado no ID resultado, ao invés de tentar usar o campo de texto #amigo.

Passos pra seguir:

  • Adiciona um nome no campo de texto e clique no botão "Adicionar".
  • O nome será exibido em uma lista abaixo do campo.
  • Quando clicar em "Sortear amigo", será exibido o nome sorteado no local destinado aos resultados.

Aqui tá o resultado:

Projeto funcionando

Muito obrigado por uma resposta tão bem explicado, está bem claro pra mim agora.