1
resposta

Problemas com o código após implementação de segurança

Após realizar a proteção na entrada de valores percebi que o "alert" está sendo exibido corretamente sempre que é inserido um número no campo "do número" maior que o inserido no campo "até o número", porém após exibir o alert o botão reiniciar continua em cinza (teoricamente desativado), porém se eu clico nele ele fica azul (ativado) e aí sim os campos são limpos. A minha idéia era que após o "alert" os campos fossem limpos e o botão reiniciar ficasse desativado, porém não consegui executar isso. Vocês poderiam me ajudar, por gentileza?

// Captando os valores inseridos nos campos "quantidade", "de" e "ate"
function sortear () {
    let quantidade = parseInt(document.getElementById('quantidade').value);
    let limiteInferior = parseInt(document.getElementById('de').value);
    let limiteSuperior = parseInt(document.getElementById('ate').value);
   
/* Abaixo foi inserida uma proteção que garantisse que o número inserido no campo "do número" fosse menor que o
inserido no campo "até o número" */
    if (limiteInferior >= limiteSuperior) {
        alert('O número inserido no campo "do número" deve ser menor que o inserido no campo "até o número", Verifique!');
        return;
    }

/* Para verificar se as variáveis estão armazenando corretamente os valores preenchidos nos campos usar o código abaixo
console.log(`Serão sorteados ${quantidade} números, do ${limiteInferior} até ${limiteSuperior}`); */

    let sorteados = []; // Criando o "array" sorteados e deixando-o vazio.
    let numero; // Criando a variável número que irá receber o número aleatório. 

    for (let i = 0; i < quantidade; i++) {
        numero = obterNumeroAleatorio(limiteInferior, limiteSuperior);

        while(sorteados.includes(numero)) {
            numero = obterNumeroAleatorio(limiteInferior,limiteSuperior);
        }
        sorteados.push(numero);
    }
    console.log(sorteados);
    
    let resultado = document.getElementById('resultado'); 
    resultado.innerHTML =`<label class="texto__paragrafo">Números sorteados: ${sorteados}</label>`;

    // Após exibir o resultado, chamar a função que irá alterar o status do botão "Reiniciar" para que ele seja ativado.
    alterarStatusBotao();
}

// Criando a função que gera um número aleatório.
function obterNumeroAleatorio (min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

//Criando a função que altera o status do botão (tanto de desabilitado para habilitado e vice versa)
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');
        }
}


//Criando uma função que faz o botão reiniciar funcionar (limpar os campos e o texto com os números sorteados que é exibido na tela)
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>';
        alterarStatusBotao();
}
1 resposta

Oi Celydiene! Tudo bem?

O problema parece estar relacionado ao fato de que o botão "Reiniciar" não está sendo desativado corretamente após o alerta ser exibido. Vou sugerir algumas modificações no seu código para tentar resolver isso.

Primeiro, na função sortear, após exibir o alerta, você pode limpar os campos e garantir que o botão "Reiniciar" esteja desativado. Veja como isso pode ser feito:

if (limiteInferior >= limiteSuperior) {
    alert('O número inserido no campo "do número" deve ser menor que o inserido no campo "até o número", Verifique!');
    reiniciar(); // Chama a função reiniciar para limpar os campos e desativar o botão
    return;
}

Além disso, na função reiniciar, você deve garantir que o botão "Reiniciar" esteja desativado após limpar os campos. Você pode ajustar a função alterarStatusBotao para que ela apenas desative o botão quando for chamada a partir da função reiniciar:

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>';
    
    // Desativa o botão "Reiniciar"
    let botao = document.getElementById('btn-reiniciar');
    botao.classList.remove('container__botao');
    botao.classList.add('container__botao-desabilitado');
}

Com essas alterações, quando o alerta for exibido, os campos serão limpos e o botão "Reiniciar" será desativado, conforme você desejou.

Espero ter ajudado e bons estudos!

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