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

Fiz diferente.

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 João Víctor Aguiar Rangel
| 59k xp | 6 posts

Fiz um trecho de código diferente do que eles fizeram e gostaria de saber se tem algum motivo para não fazer desse jeito;

No vídeo o código da função que eles fizeram foi o seguinte:

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

Eu usei a função "replace" ao invés do "remove" e "add":

function alterarStatusBotao() { let botaoReiniciar = document.querySelector('#btn-reiniciar');

if (botaoReiniciar.classList.contains('container__botao-desabilitado')) {

    botaoReiniciar.classList.replace('container__botao-desabilitado', 'container__botao');

} else {

    botaoReiniciar.classList.replace('container__botao', 'container__botao-desabilitado');

}

}

Essa diferença é uma boa opção ou pode acabar dando algum problema num código mais robusto? Também gostaria de saber se não caberia usar a função "Toggle" de alguma forma e obter o mesmo resultado.

1 resposta
solução!
por Lorena Garcia
| 8308k xp | 12158 posts
Alura Scuba Team Suporte Educacional

Oii João, tudo bem?

Sua abordagem usando a função "replace" tá correta e não deve causar problemas em um código mais robusto. A função "replace" é uma alternativa válida ao "remove" e "add", pois realiza as duas operações em um único passo. No entanto, é importante notar que "replace" não funcionará se a classe que você está tentando substituir não existir. Nesse caso, nada acontecerá e nenhuma classe será adicionada.

Em relação ao uso da função "toggle", ela poderia ser usada neste caso, mas você teria que ter certeza de que apenas uma das classes ('container__botao' ou 'container__botao-desabilitado') está presente a qualquer momento. A função "toggle" adiciona uma classe se ela não estiver presente e a remove se estiver, então você teria que ter cuidado para não acabar em um estado onde ambas as classes estão presentes ou ausentes.

Um abraço e bons estudos.