Depois de testar algumas vezes, percebi que ao clicar no botão sortear mais de uma vez o botão de reiniciar acabava habilitando e desabilitando a cada clique. Acredito que na verdade o comportamento esperado seria de habilitar o botão reiniciar quando o botão sortear é clicado e só desabilitar o botão reiniciar quando o próprio é clicado.
Tabelinha de eventos abaixo para facilitar a compreensão:
Evento | Ação |
---|---|
Botão sortear clicado | Desabilitar botão reiniciar |
Botão reiniciar clicado | Habilitar botão reiniciar |
Dessa forma, eu removi a função alterarStatusBotao() sugerida na aula e fiz a alteração do status internamente na própria função sortear e reiniciar, conforme comportamento esperado.
Segue código abaixo:
function sortear() { //sortear números com base na entrada do usário
//recuperar valores inseridos pelo usuário
let quantidade = parseInt(document.getElementById('quantidade').value);
let de = parseInt(document.getElementById('de').value);
let ate = parseInt(document.getElementById('ate').value);
//alert(`Quantidade: ${quantidade}, de: ${de}, ate: ${ate}`); //testando recuperação: OK
let sorteados = [];
let numero;
for (let i = 0; i < quantidade; i++) {
numero = obterNumeroAleatorio(de, ate);
while (sorteados.includes(numero)) {
numero = obterNumeroAleatorio(de,ate); //sorteia um novo número caso o número sorteado já esteja no array
}
sorteados.push(numero); //"empurra" o número sorteado na array de resultados
}
//alert(sorteados); //testanto sorteio: OK
let resultado = document.getElementById('resultado'); //recuperar o elemento HTML onde os números sorteados serão exibidos
resultado.innerHTML = `<label class="texto__paragrafo">Números sorteados: ${sorteados}</label>`
//habilitar o botão reiniciar
let botao = document.getElementById('btn-reiniciar');
if (botao.classList.contains('container__botao-desabilitado')) {
botao.classList.remove('container__botao-desabilitado');
botao.classList.add('container__botao');
}
}
function obterNumeroAleatorio(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min); //copiado da documentação do JS
/*
A função Math.floor arredonda pra baixo, ou seja:
Caso 1: número sorteado no intervalo [min,min+1) >> será arredondado para min
Caso 2: número sorteado no intervalo [max,max+1) >> será arredondado para max
Conclusão: todos os números tem a mesma chance de serem sorteados.
*/
/*
[0,1)
[0,1)*max = [0,max)
[0,1)*(max-min) = [0, max-min)
[0,1)*(max-min)+min = [min,max)
[0,1)*(max-min+1)+min = [min,max+1) - como todos os números são inteiros, 'max+1' nunca será sorteado
*/
}
/* O curso originalmente sugere essa solução, mas isto causa o bug de desabilitar o botão reiniciar quando o botão de sorteio é clicado duas vezes seguidas.
function alterarStatusBotao() {
//inverte o status do botão reiniciar para habilitado/desabilitado
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');
}
}
*/
function reiniciar() {
//esvaziar campos
document.getElementById('quantidade').value = '';
document.getElementById('de').value = '';
document.getElementById('ate').value = '';
//desabilitar o botão reiniciar
document.getElementById('btn-reiniciar').classList.remove('container__botao');
document.getElementById('btn-reiniciar').classList.add('container__botao-desabilitado');
}
Sendo que ainda tem alguns pontos que precisam ser vistos:
- O que o programa deve fazer se o usuário pedir mais números do que o intervalo definido permitir? (ex: 5 números entre 1 e 3)
- O que o programa deve fazer se o usuário clicar em sortear sem preencher todos os campos?
- O que o programa deve fazer se o valor "de" for maior que o valor "para"?
Não finalizei o curso ainda, então não sei se essas questões serão abordadas pelos professores. Caso não sejam, trago aqui minhas considerações.