Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

[Dúvida] Projeto faça como eu fiz

No projeto Sorteador de número do curso Lógica de programação: praticando com desafios percebi que ao finaliza-lo de acordo com as explicações da aula, caso você aperte o botão sortear sortear sem alterar o valor ele deixa o botão reiniciar desabilidado/habilitado e se você clicar no botão reiniciar mesmo ele estando habilitado ou desabilitado ele altera entre os modos. Tentei encontrar uma correção para isso mas ainda não tive capacidade nem o conhecimento necessário para realizar esta correção.

1 resposta
solução!

Olá, Maicon. Tudo bem?

O que acontece no código é que a função fica alterando o status do botão, então sempre que clica em "reiniciar" ou "sortear" ele muda o status do botão porque ambas funções chamam a função alterarStatusBotao().

Para resolver você pode quebrar a função alterarStatusBotao() em duas funções diferentes, uma para ativar o botão "reiniciar" quando sortear e outra função para desativar o botão "reiniciar", assim que clicarmos em reiniciar.

O código completo ficou assim: app.js:

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

    let sorteados = [];
    let numero;

    for (let i = 0; i < quantidade; i++) {
        numero = obterNumeroAleatorio(de, ate);

        while (sorteados.includes(numero)) {
            numero = obterNumeroAleatorio(de, ate);
        }

        sorteados.push(numero);
    }
    
    let resultado = document.getElementById('resultado');
    resultado.innerHTML = `<label class="texto__paragrafo">Números sorteados: ${sorteados}</label>`;
    ativaBotão(); //Chamei o ativa botão aqui
}

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

//Ativa o botão
function ativaBotão() {
    let botao = document.getElementById('btn-reiniciar');
        botao.classList.contains('container__botao-desabilitado')
        botao.classList.remove('container__botao-desabilitado');
        botao.classList.add('container__botao');

}

//Desativa o botão
function desativaBotão() {
    let botao = document.getElementById('btn-reiniciar');
        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>';
    desativaBotão();  //Chamei o desativa o botão aqui
}

Veja as funções do botão e veja as chamadas delas, eu deixei um comentário na reta de onde chamei as funções e também em cima das funções ativaBotão e desativaBotão.

Testa ai com o seu projeto, basta colocar esse código completo no lugar do seu JavaScript app.js, eu usei o projeto final do curso, então os nomes estão batendo com o do curso, classes css, ids etc.

RESULTADO: Gif mostrando o progeto sortear funcionando no navegador

Espero ter ajudado.

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