Olá, Maicon. Tudo bem?
O que acontece no código é que a função fica alterando o status do botão, então sempre que clica em "reiniciar" ou "sortear" ele muda o status do botão porque ambas funções chamam a função alterarStatusBotao()
.
Para resolver você pode quebrar a função alterarStatusBotao()
em duas funções diferentes, uma para ativar o botão "reiniciar" quando sortear e outra função para desativar o botão "reiniciar", assim que clicarmos em reiniciar.
O código completo ficou assim:
app.js:
function sortear() {
let quantidade = parseInt(document.getElementById('quantidade').value);
let de = parseInt(document.getElementById('de').value);
let ate = parseInt(document.getElementById('ate').value);
let sorteados = [];
let numero;
for (let i = 0; i < quantidade; i++) {
numero = obterNumeroAleatorio(de, ate);
while (sorteados.includes(numero)) {
numero = obterNumeroAleatorio(de, ate);
}
sorteados.push(numero);
}
let resultado = document.getElementById('resultado');
resultado.innerHTML = `<label class="texto__paragrafo">Números sorteados: ${sorteados}</label>`;
ativaBotão(); //Chamei o ativa botão aqui
}
function obterNumeroAleatorio(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
//Ativa o botão
function ativaBotão() {
let botao = document.getElementById('btn-reiniciar');
botao.classList.contains('container__botao-desabilitado')
botao.classList.remove('container__botao-desabilitado');
botao.classList.add('container__botao');
}
//Desativa o botão
function desativaBotão() {
let botao = document.getElementById('btn-reiniciar');
botao.classList.remove('container__botao');
botao.classList.add('container__botao-desabilitado');
}
function reiniciar() {
document.getElementById('quantidade').value = '';
document.getElementById('de').value = '';
document.getElementById('ate').value = '';
document.getElementById('resultado').innerHTML = '<label class="texto__paragrafo">Números sorteados: nenhum até agora</label>';
desativaBotão(); //Chamei o desativa o botão aqui
}
Veja as funções do botão e veja as chamadas delas, eu deixei um comentário na reta de onde chamei as funções e também em cima das funções ativaBotão
e desativaBotão
.
Testa ai com o seu projeto, basta colocar esse código completo no lugar do seu JavaScript app.js
, eu usei o projeto final do curso, então os nomes estão batendo com o do curso, classes css, ids etc.
RESULTADO:
Espero ter ajudado.
Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓.Bons Estudos!