2
respostas

[Sugestão] Inclusão de variável para o botão Sortear

Fiz junto com o vídeo e tomei liberdade de fazer o mesmo processo que tinha feito na aula de pré-requisito, eu adicionei também para que o botão de Sortear fique desabilitado enquanto o botão de reiniciar ficar habilitado, pois ele fecha a lógica e dá um melhor senso ao usuário, desencorajando a clicar novamente no botão.

function alterarStatusBotao(){
    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');
    }

    let botaoSort = document.getElementById('btn-sortear');
    if(botao.classList.contains('container__botao')){
        botaoSort.classList.remove('container__botao');
        botaoSort.classList.add('container__botao-desabilitado');
    } else{
        botaoSort.classList.remove('container__botao-desabilitado');
        botaoSort.classList.add('container__botao');
    }
}
2 respostas

Olá, Gabriel! Joia?

Achei muito interessante a sua sugestão de desabilitar o botão "Sortear" quando o botão "Reiniciar" está habilitado. Isso realmente melhora a experiência do usuário e evita cliques desnecessários.

Também agradeço por compartilhar seu código com os demais estudantes, com certeza vai ajudar nos estudos de todas as pessoas que estão aprendendo este mesmo assunto.

Continue mergulhando em tecnologia e se tiver dúvidas, conte com o fórum.

Abraços e bons estudos!

Opa! Tudo bem?

Uma sugestão de melhoria para o seu código é reduzir as condicionais redundantes. Repare que você tem um if que verifica se o botão tem a classe 'container__botao-desabilitado' e, em seguida, verifica se ele contém a classe 'container__botao'. Essas duas verificações são mutuas, ou seja, se uma for verdadeira, a outra será falsa. Portanto, você pode simplificar o código usando apenas um if e um else.

function alterarStatusBotao() {
    let botaoReiniciar = document.getElementById('btn-reiniciar');
    let botaoSort = document.getElementById('btn-sortear');
    
    if (botaoReiniciar.classList.contains('container__botao-desabilitado')) {
        botaoReiniciar.classList.remove('container__botao-desabilitado');
        botaoReiniciar.classList.add('container__botao');
        botaoSort.classList.remove('container__botao');
        botaoSort.classList.add('container__botao-desabilitado');
    } else {
        botaoReiniciar.classList.remove('container__botao');
        botaoReiniciar.classList.add('container__botao-desabilitado');
        botaoSort.classList.remove('container__botao-desabilitado');
        botaoSort.classList.add('container__botao');
    }
}