Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

[Sugestão] Ajuste no uso dos botões

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

por Durval Fernandes Paes Barbosa
| 13.7k xp | 12 posts

Verifiquei que tinha um problema nos botões, o sortear estava habilitado mesmo já tendo sorteado e sem reiniciar e o reiniciar estava funcionando o click meio com ele aparentemente desabilitado. Depois de alguns testes de como resolver achei essa forma, coloquei um disabled no botão reiniciar e implementei o código pra habilitar e desabilitar ambos os botões devidamente dentro da função de alteração.

PS : Ao invés do remove e add utilizados na aula usei o replace, vi na lista de comandos e deduzi a função.

 function alterarStatusBotao() {
        let botao = document.getElementById('btn-reiniciar');
        if (botao.classList.contains('container__botao-desabilitado')) {
            botao.classList.replace('container__botao-desabilitado', 'container__botao');
            document.getElementById("btn-reiniciar").disabled = false;
            document.getElementById("btn-sortear").disabled = true;
        } else {
            botao.classList.replace('container__botao', 'container__botao-desabilitado');
             document.getElementById("btn-reiniciar").disabled = true;
            document.getElementById("btn-sortear").disabled = false;
          }
 }

Tenho a impressão que poderia ter feito de maneira mais curta, aceito sugestões.

1 resposta
solução!
por Armano Barros Alves Junior
| 3767.1k xp | 8008 posts
Alura Scuba Team

Oi Durval! Tudo certo?

Que legal que você encontrou uma solução para o problema dos botões e ainda experimentou com o método replace. Isso mostra que você está explorando e aprendendo, o que é ótimo!

Sobre a possibilidade de encurtar o código, você já fez um ótimo trabalho. O uso do replace simplifica realmente a troca de classes, eliminando a necessidade de usar remove e add separadamente. Isso já é uma otimização!

No entanto, se quiser deixar o código ainda mais compacto, uma alternativa seria usar um operador ternário para alternar entre as classes, mas isso pode comprometer um pouco a legibilidade, especialmente para quem está começando. Aqui está uma ideia de como poderia ser feito:

function alterarStatusBotao() {
    let botao = document.getElementById('btn-reiniciar');
    let sortear = document.getElementById("btn-sortear");
    let desabilitado = botao.classList.contains('container__botao-desabilitado');
    
    botao.classList.replace(
        desabilitado ? 'container__botao-desabilitado' : 'container__botao',
        desabilitado ? 'container__botao' : 'container__botao-desabilitado'
    );
    
    botao.disabled = !desabilitado;
    sortear.disabled = desabilitado;
}

Essa abordagem usa o operador ternário para decidir qual classe adicionar e qual remover, mas, como mencionei, a legibilidade pode ser um pouco afetada. Então, é uma questão de preferência pessoal e de quão confortável você está com a leitura desse tipo de código.

Espero ter ajudado e bons estudos!

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