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
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
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:
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>
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;
});
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!
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!