Entrar Ainda não tem acesso?
2
respostas

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

Referente ao curso Lógica de programação: praticando com desafios, no capítulo Projeto Sorteador de números e atividade Faça como eu fiz: alterando o status do botão

por Gabriel dos Santos Marçal
| 56.5k xp | 48 posts
Assistente de Supervisão CallCenter

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
por Armano Barros Alves Junior
| 2314.4k xp | 4752 posts
Alura Scuba Team Monitor | Suporte Educacional

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!

por Gabriel Mansolff Ortiz Gimieski
| 29.3k xp | 17 posts

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');
    }
}