Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

[Dúvida] Botão abilitado ou desabilitado.

Oi, boa tarde pessoas! Eu segui aqui com o projeto sorteador de números e configurei o status da cor do botão para alterar quando o usuário clicar. Porém, agora gostaria de usar a opção de manter os botões desabilitados e abilitar somente quando necessário. O Sortear quando o programa for iniciado e o reiniciar abilitar quando o sorteio for efetuado com sucesso. Segue meu código javascript.

function sortear () {
    let quantidade =parseInt(document.getElementById('quantidade').value);
let doNumero = parseInt(document.getElementById('de').value);
let ateNumero = parseInt(document.getElementById('ate').value);
if (doNumero >= ateNumero) {
    alert('Campo "Do número" deve ser inferior ao campo "Até o número". Verifique!');
    return;
  }
  if (quantidade > (ateNumero - doNumero + 1)) {
    alert('Campo "Quantidade" deve ser menor ou igual ao intervalo informado no campo "Do número" até o campo "Até o número". Verifique!');
    return;
  }

let sorteados = [];
let numero;
for (let i = 0; i < quantidade; i++) {
numero = obterNumeroAleatorio(doNumero, ateNumero);
while (sorteados.includes(numero));
sorteados.push(numero);
} 
let exibirSorteados = document.getElementById('resultado');
exibirSorteados.innerHTML = `<label class ="texto__paragrafo"> Números sorteados até agora: ${sorteados}</label>`;
alterarStatusBotao();
}  

function obterNumeroAleatorio(min, max) {
    min = Math.ceil(min);
    max = Math.floor(max);
    return Math.floor(Math.random() * (max - min + 1)) + min;
  
}
function alterarStatusBotao() {
    let alterar = document.getElementById('btn-reiniciar');
    if (alterar.classList.contains('container__botao-desabilitado')) {
        alterar.classList.remove('container__botao-desabilitado');
        alterar.classList.add('container__botao');
    } else {
alterar.classList.remove('container__botao');
alterar.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>';
    alterarStatusBotao();

}

Fico grato para quem puder ajudar!

1 resposta
solução!

Para manter o botão desabilitado até que o sorteio seja efetuado com sucesso, você pode ajustar a função alterarStatusBotao() para aceitar um parâmetro indicando se o botão deve ser habilitado ou desabilitado. Assim, você pode chamá-la com alterarStatusBotao(true) para habilitar o botão e alterarStatusBotao(false) para desabilitá-lo. Aqui está como você pode modificar seu código:

function sortear() {
    let quantidade = parseInt(document.getElementById('quantidade').value);
    let doNumero = parseInt(document.getElementById('de').value);
    let ateNumero = parseInt(document.getElementById('ate').value);
    if (doNumero >= ateNumero) {
        alert('Campo "Do número" deve ser inferior ao campo "Até o número". Verifique!');
        return;
    }
    if (quantidade > (ateNumero - doNumero + 1)) {
        alert('Campo "Quantidade" deve ser menor ou igual ao intervalo informado no campo "Do número" até o campo "Até o número". Verifique!');
        return;
    }

    let sorteados = [];
    let numero;
    for (let i = 0; i < quantidade; i++) {
        numero = obterNumeroAleatorio(doNumero, ateNumero);
        while (sorteados.includes(numero)) {
            numero = obterNumeroAleatorio(doNumero, ateNumero);
        }
        sorteados.push(numero);
    }
    let exibirSorteados = document.getElementById('resultado');
    exibirSorteados.innerHTML = `<label class ="texto__paragrafo"> Números sorteados até agora: ${sorteados}</label>`;
    alterarStatusBotao(true);
}

function obterNumeroAleatorio(min, max) {
    min = Math.ceil(min);
    max = Math.floor(max);
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

function alterarStatusBotao(habilitar) {
    let botao = document.getElementById('btn-reiniciar');
    if (habilitar) {
        botao.disabled = false;
        botao.classList.remove('container__botao-desabilitado');
        botao.classList.add('container__botao');
    } else {
        botao.disabled = true;
        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>';
    alterarStatusBotao(false);
}

Se você quer para habilitar o botão "Sortear" apenas quando todos os campos estiverem preenchidos, você pode adicionar um evento de escuta (event listener) nos campos de entrada. Este evento será acionado sempre que houver uma alteração em qualquer campo de entrada, verificando se todos os campos estão preenchidos antes de habilitar o botão "Sortear".

Adicione esse trecho de código no começo do seu arquivo app.js:

document.addEventListener("DOMContentLoaded", function() {
    const quantidadeInput = document.getElementById('quantidade');
    const deInput = document.getElementById('de');
    const ateInput = document.getElementById('ate');
    const sortearButton = document.getElementById('btn-sortear');

    quantidadeInput.addEventListener('input', validarCampos);
    deInput.addEventListener('input', validarCampos);
    ateInput.addEventListener('input', validarCampos);

    function validarCampos() {
        const quantidade = quantidadeInput.value.trim();
        const de = deInput.value.trim();
        const ate = ateInput.value.trim();

        if (quantidade != '' && de != '' && ate != '') {
            sortearButton.disabled = false;
            sortearButton.classList.remove('container__botao-desabilitado');
            sortearButton.classList.add('container__botao');
        } else {
            sortearButton.disabled = true;
            sortearButton.classList.remove('container__botao');
            sortearButton.classList.add('container__botao-desabilitado');
        }
    }
});

Certifique-se de que o botão no seu HTML tenham o atributo disabled inicialmente, como no exemplo abaixo:

<button onclick="sortear()" id="btn-sortear" class="container__botao-desabilitado" disabled>Sortear</button>
<button onclick="reiniciar()" id="btn-reiniciar" class="container__botao-desabilitado" disabled>Reiniciar</button>

Qualquer dúvida coloque aqui no fórum.

Bons estudos!