2
respostas

[Bug] duvida nos botões de reinicio e sortear

Ambos os botões estão desligados, e o botão de reiniciar nem está aparecendo na tela. Em minha visão, o código está todo correto

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>;
alterarStatusBotão();
}

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

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');
}

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

2 respostas

Olá Matheus!
O seu código está quase certo, mas há alguns probleminhas que explicam por que os botões não estão funcionando e o botão de reiniciar nem aparece.
1 - Erro de sintaxe ao definir o conteúdo HTML
No trecho

resultado.innerHTML = <label class="texto__paragrafo">Números sorteados: ${sorteados}</label>;

você esqueceu de envolver o conteúdo da string entre crases, por isso o JS está interpretando como um erro de sintaxe.

2 - Erro no nome da função: alterarStatusBotão()
Você chama: alterarStatusBotão(); com acento. Mas a função está declarada como: function alterarStatusBotao() sem acento. O JavaScript é case sensitive, então isso quebra a execução.

3 - Erro possível.
O botão de reiniciar existe no HTML? O botão deve ter: id="btn-reiniciar" e classes corretas (container__botao ou container__botao-desabilitado)
Exemplo:

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

Se não tiver esse botão no HTML, ele não aparece mesmo.

Código corrigido

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

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

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');
    }
}

Espero que vai funcionar!