Entrar Ainda não tem acesso?
1
resposta

[Bug] Alguns bugs na minha aplicação

Referente ao curso Lógica de programação: praticando com desafios, no capítulo Projeto Sorteador de números e atividade O que aprendemos?

por RENAN CARDOSO SEGRETTI
| 14k xp | 6 posts

Quando eu tento sortear muitos números, tipo uns 10, a aplicação trava. Tenho que fechar a página e abrir de novo e fazer testes com números menores. Se eu tenho sortear 4 números entre 1 e 6, também trava.

O botão reiniciar, toda vez que clico, ele muda de classe. Mas quando ele está cinza, não deveria mudar de classe (de cor) quando é clicado não é? Toda vez que eu clico em sortear ou reinicar, o botão reiniciar muda. Como posso corrigir isso?

function sortear() {
    let quantidade = parseInt(document.getElementById('quantidade').value);
    let de = parseInt(document.getElementById('de').value);
    let ate = parseInt(document.getElementById('ate').value);

    if (de >= ate) {
        alert("O número inicial tem que ser menor que o número final.");
        return;
    }

    if (quantidade > de + ate) {
        alert("A quantidade de números tem que ser menor que o intervalo escolhido.");
        return;
    }
    
    let numerosSorteados = [];
    let numero;
    
    for(let i = 0; i < quantidade; i++) {
        numero = gerarNumeroAleatorio(de,ate);
        while(numerosSorteados.includes(numero)){
            gerarNumeroAleatorio(de,ate);
        }
        numerosSorteados.push(numero);
    }
    
    let resultado = document.getElementById('resultado');
    resultado.innerHTML = `<label class="texto__paragrafo">Números sorteados: ${numerosSorteados}.</label>`;

    alterarStatusDoBotao();
};

function gerarNumeroAleatorio (min,max) {
    return Math.floor(Math.random() * (max - min + 1)) + min; 
};

function alterarStatusDoBotao() {
    let botao = document.getElementById('btn-reiniciar');
    if (botao.classList.contains('container__botao-desabilitado')) {
        botao.classList.remove('container__botao-desabilitado');
        botao.classList.add('container__botao');
    } else {
        botao.classList.remove('container__botao');
        botao.classList.add('container__botao-desabilitado');
    }
}

function reiniciar() {
    document.getElementById('quantidade').value = "";
    document.getElementById('de').value = "";
    document.getElementById('ate').value = "";

    document.getElementById('resultado').innerHTML = '<label class="texto__paragrafo">Números sorteados:  nenhum até agora</label>';

    alterarStatusDoBotao();
}
1 resposta
por Sarah Ocy Sousa Medeiros
| 1837.4k xp | 3782 posts
Alura Scuba Team Monitora de Fórum Ops

Oi, Renan! Tudo bem?

Em relação ao problema de travamento ao sortear muitos números ou mesmo ao sortear 4 números entre 1 e 6, ele está ocorrendo devido a um loop infinito no código. No trecho onde geramos números aleatórios e verificamos se eles já foram sorteados, não estamos atualizando a variável "numero" dentro do loop "while", o que faz com que, se o número gerado já estiver no array de números sorteados, o loop continue infinitamente, pois o valor de "numero" nunca muda. Para corrigir isso, basta atribuirmos o resultado da função "gerarNumeroAleatorio(de,ate)" à variável "numero" dentro do loop "while", assim:

for(let i = 0; i < quantidade; i++) {
    numero = gerarNumeroAleatorio(de,ate);
    while(numerosSorteados.includes(numero)){
        numero = gerarNumeroAleatorio(de,ate);
    }
    numerosSorteados.push(numero);
}

Quanto ao botão "Reiniciar", o problema ocorre pois estamos chamando a função "alterarStatusDoBotao()" tanto no final da função "sortear()" quanto na função "reiniciar()", o que faz com que o botão mude de cor sempre que essas funções são chamadas. A solução aqui é remover a chamada dessa função no final da função "sortear()", e adicionar uma verificação na função "alterarStatusDoBotao()" para que ela só altere a classe do botão se ele estiver habilitado, de acordo com o exemplo abaixo:

function sortear() {
    // ... código anterior ...
    // remova a linha abaixo
    // alterarStatusDoBotao();
}

function alterarStatusDoBotao() {
    let botao = document.getElementById('btn-reiniciar');
    // só altera a classe se o botão estiver habilitado
    if (!botao.classList.contains('container__botao-desabilitado')) {
        botao.classList.remove('container__botao');
        botao.classList.add('container__botao-desabilitado');
    }
}

Espero ter ajudado! Caso tenha ficado alguma dúvida, sinta-se à vontade em comunicar, estou à disposição!

Um forte abraço e bons estudos!

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