3
respostas

[Projeto] Projeto Sorteador de Numeros

Projeto no Git. Gostaria de saber como desabilitar melhor o botão reiniciar, ele liga e desliga só de clicar nele e zera os números sem ter sorteado.

https://github.com/MateusY8/sorteador-numeros/blob/master/app.js

3 respostas

Olá, Mateus! Tudo bem?

Primeiramente, o link que você compartilhou está inacessível, ao copiar ele pode ter faltado alguma parte ou você tenha adicionado alguma letra no meio do link. Enfim, para adiantar um pouco, deixarei alguns passos gerais que você pode tentar verificar e aplicar no seu código para ajustar esse problema com o botão de reiniciar.

Para desabilitar o botão "Reiniciar" de forma mais eficaz, você pode seguir algumas etapas. Primeiro, é importante garantir que o botão só esteja ativo quando necessário. Uma abordagem comum é habilitar o botão somente após um sorteio ter sido realizado. Aqui está um exemplo de como você pode fazer isso:

  1. Inicialmente, desabilite o botão "Reiniciar": No seu HTML, você pode definir o atributo disabled no botão "Reiniciar" para que ele comece desabilitado:

    <button id="reiniciar" disabled>Reiniciar</button>
    
  2. Habilitar o botão após o sorteio: No seu JavaScript, após a função de sorteio ser executada com sucesso, você pode habilitar o botão "Reiniciar":

    document.getElementById('sortear').addEventListener('click', function() {
        // Lógica para sortear os números
        // ...
    
        // Habilitar o botão "Reiniciar" após o sorteio
        document.getElementById('reiniciar').disabled = false;
    });
    
  3. Desabilitar o botão após reiniciar: Quando o botão "Reiniciar" for clicado, você pode desabilitá-lo novamente até que um novo sorteio seja realizado:

    document.getElementById('reiniciar').addEventListener('click', function() {
        // Lógica para reiniciar o sorteio
        // ...
    
        // Desabilitar o botão "Reiniciar" novamente
        this.disabled = true;
    });
    

Essas etapas devem ajudar a controlar melhor quando o botão "Reiniciar" está ativo. Lembre-se de ajustar a lógica de sorteio e reinício conforme necessário para o seu projeto específico.

Espero ter ajudado e bons estudos!

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

Link do projeto no git. https://github.com/MateusY8/sorteador-numeros

Ps. Ainda não consegui desabilitar da forma correta.

Bom dia, Mateus!

Pensando numa melhor forma de habilitar e desabilitar o botão de reiniciar, utilizando das boas práticas de programação, vi que separar essas ações em duas funções distintas seria uma ótima opção.

function habilitarBotao() {
    let botao = document.getElementById('btn-reiniciar');
    botao.classList.remove('container__botao-desabilitado');
    botao.classList.add('container__botao');
    botao.disabled = false;

}

function desabilitarBotao() {
    let botao = document.getElementById('btn-reiniciar');
    botao.classList.remove('container__botao');
    botao.classList.add('container__botao-desabilitado');
    botao.disabled = true;
}

Basicamente o que fiz foi tirar tudo que estava no if da função alterarStatusBotao e coloquei dentro outra função chamada habilitarBotao e adicionei a propriedade disabled como false, para que o botão fosse habilitado. Fiz o mesmo com o código que estava no else, criei uma função desabilitarBotao e coloquei tudo nela. Porém, a propriedade disabled está delimitada como true para assim desabilitar o botão.

Pronto, depois que definir cada uma dessas funções, agora você tem que chamar elas onde anteriormente estava sendo chamada a função alterarStatusBotao. Porém, atente-se, a função habilitarBotao deve ser chamada ao fim da função sortear e a desabilitarBotao ao fim da reiniciar.

Espero ter ajudado e fico à disposição para mais dúvidas ou problemas!