[Bug] Socorro! | Lógica de programação: explore funções e listas

No exemplo da aula foi apresentado a seguinte forma:

//Código omitido

function reiniciarJogo() {
    numeroSecreto = gerarNumeroAleatorio();
    limparCampo();
    tentativas =1;
    exibirMensagemInicial();
    document.getElementById('reiniciar').setAttribute('disabled', true)
}

Porem deste jeito o botão não desabilita, fiz uma mudança da ordem e funcionou, vou evidenciar como ficou e logo apos o codigo completo:

function reiniciarJogo() {
    numeroSecreto = gerarNumeroAleatorio();
    document.getElementById('reiniciar').setAttribute('disabled', true);
    limparCampo();
    tentativas =1;
    exibirMensagemInicial();
}

Codigo completo:

let numeroSecreto = gerarNumeroAleatorio();
let tentativas = 1;

function exibirTextoNaTela(tag, texto) {
    let campo = document.querySelector(tag);
    campo.innerHTML = texto;
}

function exibirMensagemInicial() { 
    exibirTextoNaTela('h1', 'Jogo do número secreto'); 
    exibirTextoNaTela('p', 'Escolha um número entre 1 e 10'); I
}

exibirMensagemInicial()

function verificarChute() {
    let chute = document.querySelector('.container__input').value;

    if (chute == numeroSecreto) {
        exibirTextoNaTela('h1', 'Parabéns, você acertou!');
        let palavraTentativas = tentativas > 1 ? 'tentativas' : 'tentativa';
        let mensagemTentativas = `Você desconbriu o numero secreto com ${tentativas} ${palavraTentativas}!`;
        exibirTextoNaTela('p', mensagemTentativas);
        document.getElementById('reiniciar').removeAttribute('disabled');

    } else {
        if (chute > numeroSecreto) {
            exibirTextoNaTela('p', 'O número secreto é menor');
        } else {
            exibirTextoNaTela('p', 'O número secreto é maior');
        }
       
        tentativas++;
        limparCampo();
    }


}

function gerarNumeroAleatorio() {
    return parseInt(Math.random() * 10 + 1);
}

function limparCampo() {
    chute = document.querySelector('.container__input');
    chute.value = '';
}

function reiniciarJogo() {
    numeroSecreto = gerarNumeroAleatorio();
    document.getElementById('reiniciar').setAttribute('disabled', true);
    limparCampo();
    tentativas =1;
    exibirMensagemInicial();
}

Meu HTML:

<!DOCTYPE html>
<html lang="pt-br">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://code.responsivevoice.org/responsivevoice.js"></script>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@700&family=Inter:wght@400;700&display=swap"
        rel="stylesheet">
    <link rel="stylesheet" href="style.css">
    <title>JS Game</title>
</head>

<body>

    <div class="container">
        <div class="container__conteudo">
            <div class="container__informacoes">
                <div class="container__texto">
                    <h1>Adivinhe o <span class="container__texto-azul">numero secreto</span></h1>
                    <p class="texto__paragrafo">Escolha um número entre 1 a 10</p>
                </div>
                <input type="number" min="1" max="10" class="container__input">
                <div class="chute container__botoes">
                    <button onclick="verificarChute()" class="container__botao">Chutar</button>
                    <button onclick="reiniciarJogo()" id="reiniciar" class="container__botao" disabled>Novo jogo</button>
                </div>
            </div>
            <img src="./img/ia.png" alt="Uma pessoa olhando para a esquerda" class="container__imagem-pessoa" />
        </div>
    </div>




    <script src="app.js" defer></script>
</body>

</html>

Olá Gil! Como vai?

Que bom que você conseguiu resolver o problema ao alterar a ordem das instruções na função reiniciarJogo().

A ordem das operações em um código pode, de fato, afetar o comportamento do programa. No seu caso, ao mover a linha document.getElementById('reiniciar').setAttribute('disabled', true); para antes da chamada da função limparCampo(), o botão foi desabilitado corretamente.

Isso acontece porque, dependendo do que está sendo executado nas funções subsequentes, pode haver alguma operação que interfere na atualização do estado do botão. Ao garantir que o botão seja desabilitado imediatamente após o novo número ser gerado, você evita que qualquer outra operação subsequente interfira nesse processo.

É sempre uma boa prática testar diferentes ordens de execução quando algo não está funcionando como esperado, pois isso pode revelar dependências não óbvias entre as operações.

No mais, bons estudos!