Notei que mesmo sem colocar qualquer valor nos formulários o botão Sortear ainda funcionava. Então tentei desabilitar o botão usando as seguintes linhas:

}  if (quantidade == null || de == null || ate == null || quantidade === '' || de === '' || ate === '') { 

    alert('Por favor, preencha todos os campos.'); 
    document.getElementById('btn-sortear').disabled = true;
    return; 

}

Esse código não funcionou e não consegui entender o porquê disso. Desisti e perguntei ao Copilot e ele recomendou isso:

    if (!quantidade || !de || !ate) { 
        alert('Por favor, preencha todos os campos.'); 
        document.getElementById('botao-sortear').disabled = true; // Desabilita o botão 
        return; 
        
    }

Código completo da função sortear:

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;

    if (!quantidade || !de || !ate) { 
        alert('Por favor, preencha todos os campos.'); 
        document.getElementById('botao-sortear').disabled = true; // Desabilita o botão 
        return; 
        
    }

    if (quantidade > (ate - de +1)) {
        alert('A quantidade de números não pode ser menor que o intervalo informado');
        return;
    }



    if (de >= ate ) {
        alert('O número mínimo não pode ser maior que o máximo! Digite outro número.');
        return;

    } else {

        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>`;
        alterarStatusBotaoSortear();
        alterarStatusBotao();
    }    

}

Dessa maneira funcionou corretamente, alguém saberia dizer o porquê?

Oi Pedro,

Excelente iniciativa em buscar aprimorar o projeto! 👍

Sua abordagem para desabilitar o botão "Sortear" após o uso e impedir cliques indesejados está bem pensada.

A adição de pointer-events: none; no CSS foi crucial para evitar a mudança de cor ao clicar no botão desabilitado. 💪

Sobre o código que não funcionou inicialmente, o problema estava na verificação dos valores dos inputs. Quando você usa document.getElementById('quantidade').value, o valor retornado é sempre uma string, mesmo que o usuário digite números.

Ao usar parseInt(), se o campo estiver vazio, ele retornará NaN (Not a Number), que é um valor "falsy" em JavaScript.

Sua primeira tentativa de verificação com quantidade == null || de == null || ate == null || quantidade === '' || de === '' || ate === '' não funcionou porque NaN não é igual a null ou ''. Já a segunda tentativa com !quantidade || !de || !ate funcionou porque o operador ! converte o valor para booleano, e NaN é convertido para false, assim como strings vazias. 🤔

Para saber mais: Valores falsy em JavaScript. Este link explica o conceito de valores falsy em JavaScript, o que ajudará a entender melhor como as condições funcionam.

Continue explorando e aprimorando seus projetos! 💻