advinha_mais | JavaScript e HTML: desenvolva um jogo e pratique lógica de programação

Fala galera! Boa tarde!

Meu código rodou bem, graças a Deus! (kkk) quebrei um pouquinho a cabeça no começo mas assistindo a aula novamente, clareou bastante. Obrigado professor Flávio! Show demais seu ensino.

Segue o código:

<meta charset="UTF-8">

<h1>Que tal jogar um pouco de adivinhação?</h1>

<h3>Qual número de 1 a 10 estou pensando?</h3>

<input/> <!- área retangular onde o usuário vai inserir o dado->

<button>Tentar</button> <!-botão que o usuário vai clicar para executar a ação no javascript->
<br>
<br>
<script>

    var input = document.querySelector("input");//criei a variável input para receber o que for digitado na tag input do HTML

    function sorteia(n) {
        // Aqui gera um número aleatório de zera a 10.
        return n = Math.round(Math.random() * 10);

    }

    function compara() {//criei essa função pra testar se o usuário acertou ou não.

        var numeroPensado = sorteia();//aqui atribuo à variável numeroPensado o número sorteado chamando a função sorteia.

        if(input.value == numeroPensado) {//input.value é o valor atribuído ao input

            alert("Uau! Você acertou, pois eu pensei no número " + numeroPensado);

        } if (input.value < numeroPensado) {

                alert("Você errou! Eu pensei em outro, que é maior que " + input.value);

            } if (input.value > numeroPensado) {

                    alert("Você errou! Eu pensei em outro, que é menor que " + input.value);
                }  
    }  

    var button = document.querySelector("button");//a variável button recebe o clicar do button no HTML
    button.onclick = compara; // aqui atribuí à ação de clicar no botão "Tentar" o código passado na função compara.

</script>

DÚVIDA: como posso fazer aparecer no HTML nas linhas abaixo do input e button o que está aparecendo no alert? tentei e pensei, tentei imaginar, mas nada. Alguém pode me ajudar?

Grato.

Olá Hugo, tudo bem?

Uma das formas de fazer aparecer dentro do HTML o que está escrito no alert , é através de uma sequência de passos que explicarei a seguir:

1º Criaremos no HTML, o elemento <label>, que será responsável por guardar o resultado da comparação (Você acertou/Você errou), que antes estava alocado no alert.

<label></label>

2º Em seguida, dentro do <script> iremos criar a variável label, que irá apontar para a tag <label> do html.

var label = document.querySelector("label");

3º Por último, substituiremos todas as chamadas da função alert pelo label.innerText, que é uma propriedade que irá trocar o conteúdo da <label>. Neste caso em específico, o conteúdo da <label> é nulo e será substituído pelo conteúdo compreendido dentro das aspas.

label.innerText = "Uau! Você acertou, pois eu pensei no número " + numeroPensado;
label.innerText = "Você errou! Eu pensei em outro, que é maior que " + input.value;
label.innerText = "Você errou! Eu pensei em outro, que é menor que " + input.value;

Esse é o código completo ao final dos passos:

<meta charset="UTF-8">

<h1>Que tal jogar um pouco de adivinhação?</h1>

<h3>Qual número de 1 a 10 estou pensando?</h3>

<input/> <!-- área retangular onde o usuário vai inserir o dado-->

<button>Tentar</button> <!--botão que o usuário vai clicar para executar a ação no javascript-->
<br>
<br>
<label></label> <!--passo 1-->
<br>
<script>

    var input = document.querySelector("input");//criei a variável input para receber o que for digitado na tag input do HTML
    var label = document.querySelector("label"); //passo 2

    function sorteia(n) {
        // Aqui gera um número aleatório de zera a 10.
        return n = Math.round(Math.random() * 10);

    }

    function compara() {//criei essa função pra testar se o usuário acertou ou não.

        var numeroPensado = sorteia();//aqui atribuo à variável numeroPensado o número sorteado chamando a função sorteia.

        if(input.value == numeroPensado) {//input.value é o valor atribuído ao input

            label.innerText = "Uau! Você acertou, pois eu pensei no número " + numeroPensado; //passo 3

        } if (input.value < numeroPensado) {

                label.innerText = "Você errou! Eu pensei em outro, que é maior que " + input.value; //passo 3

            } if (input.value > numeroPensado) {

                    label.innerText = "Você errou! Eu pensei em outro, que é menor que " + input.value; //passo 3
                }  
    }  

    var button = document.querySelector("button");//a variável button recebe o clicar do button no HTML
    button.onclick = compara; // aqui atribuí à ação de clicar no botão "Tentar" o código passado na função compara.

</script>

Esse é o resultado:

Caso queira aprender um pouco mais sobre a propriedade innerText, segue uma indicação de leitura:

https://www.w3schools.com/jsref/prop_node_innertext.asp

Espero ter ajudado. Em caso de dúvidas, fique a vontade para perguntar. Bons estudos!