Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
6
respostas

[Dúvida] Me ajudem a melhorar o código desse jogo da advinhação. please...

por Cassio Viana Da Silva
| 109.3k xp | 5 posts

O código é esse:


<meta charset="UTF-8">
<html><head><style>body {background-color: rgba(0, 0, 0, 0.866);color: rgb(171, 171, 158);}</style></head></html>

<h1>Associando scripts a Campos e formulários - Jogo de Advinhação Melhorado</h1><br>

<a1><script>maxTentativas = 5; document.write(`Tente advinhar um número de 1 a 99, em ${maxTentativas} tentativas`);</script></a1><br>
<input/><button>Compare com o meu segredo</button>

<script>
    var segredo = (Math.random() *100).toFixed(0);
    document.write(segredo);
    tentativas = 1;
    var button = document.querySelector("button");
    var input = document.querySelector("input");
    input = parseInt(input.value);
    button.onclick = verifica;

    function verifica() {
        if (tentativas <= maxTentativas) {

        var input = document.querySelector("input");
        input = parseInt(input.value);

            if (input == segredo) {
            document.write("Parabéns! Você acertou! Recarregue a página se desejar jogar novamente!");

            } if(tentativas <= (maxTentativas - 1)) {
                if(input > segredo){
                alert(`Tente de novo, o número que você escolheu é maior que o número que eu Escolhi!`);
                }
                if(input < segredo){
                alert(`Tente de novo, o número que você escolheu é menor que o número que eu Escolhi!`);
                }
            } else {
                document.body.style.background = "#AA0000";
                document.body.style.color = "#AA0001";
                document.write(`Você stingiu o número máximo de tentativas, o número exato é: ${segredo}! Recarregue a página se desejar jogar novamente!`);
            }   
        tentativas++;
        }   
    }

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

    button.onclick = verifica;


</script>

Eu gostaria de melhorar os seguintes pontos:

  • Na hora de clicar em tentativa no button, gostaria que a mensagem não aparecesse em alert(), mas sim em document.wrtie() logo abaixo do botão, mostrando o número de tentativas que o usuário ainda tem, e se o chute dele foi maior ou menor que o número segreo.
  • Outro ponto: quando o usuário erra mais de 5 vezes, a mensagem de tentativas esgotadas ou a mensagem de parabéns que a pessoa acertou o número aparece em uma nova tela em branco, gostaria que essa mensagem também aparecesse abaixo do botão e com as cores do html da página inicial.

Agradeço a ajuda.

6 respostas
por Danilo Bezerra Da Silva Araujo
| 114.5k xp | 13 posts

abaixo da tag do botão coloque:

<p id="message"></p>

no seu script JavaScript:

const messageTag = document.querySelector("#message");

onde você usava alert(...sua mensagem) coloque: messageTag..innerText = "...sua messagem"

isso fará com que toda vez que você usar messageTag..innerText = "...sua messagem" uma messagem seja exibida abaixo do botão

Para deixar a mensagem em branco messageTag..innerText = ""

por Cassio Viana Da Silva
| 109.3k xp | 5 posts

valeu , danilo vou tentar

por Cassio Viana Da Silva
| 109.3k xp | 5 posts

@Danilo, não estou conseguindo...

agora aparece um erro no Debug: Uncaught TypeError: Cannot set properties of null (setting 'innerText') at HTMLButtonElement.verifica (jogo_advinha_mais.html:31:38)

Segue o código:

<meta charset="UTF-8">
<html><head><style>body {background-color: rgba(0, 0, 0, 0.866);color: rgb(171, 171, 158);}</style></head></html>

<h1>Associando scripts a Campos e formulários - Jogo de Advinhação Melhorado</h1><br>

<a1><script>maxTentativas = 2; document.write(`Tente advinhar um número de 1 a 99, em ${maxTentativas} tentativas`);</script></a1><br>
<input/><button>Compare com o meu segredo</button>



<script>
    var segredo = (Math.random() *100).toFixed(0);
    document.write(segredo);
    tentativas = 1;
    var button = document.querySelector("button");
    var input = document.querySelector("input");
    input = parseInt(input.value);
    button.onclick = verifica;

    function verifica() {
        if (tentativas <= maxTentativas) {

        var input = document.querySelector("input");
        input = parseInt(input.value);

            if (input == segredo) {
                alert("Parabéns! Você acertou! Recarregue a página se desejar jogar novamente!");

            } if (tentativas <= (maxTentativas - 1)) {

                messageTag.innerText = "Tente de novo";

            } else {
                alert(`Você stingiu o número máximo de tentativas, o número exato é: ${segredo}! Recarregue a página se desejar jogar novamente!`);
            }   
        tentativas++;
        }   
    }

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

    button.onclick = verifica;


</script>

<br>
<br>

<script>
    const messageTag = document.querySelector("#message");
</script>

Alguém pode me ajudar?

Obrigado

por Pedro Henrique Queiroz
| 94.1k xp | 4 posts

Adiciona essa linha no seu html, embaixo de "Compare o meu segredo" mesmo. Ficou faltando do programa saber onde escrever a mensagem, ai o programa ficou perdido mesmo

<p id="message"></p>

solução!
por Danilo Bezerra Da Silva Araujo
| 114.5k xp | 13 posts

Faltou uma tag p com id message no html da página.

Segue o seu código com as correções, testei aqui e funcionou

<meta charset="UTF-8">
<html><head><style>body {background-color: rgba(0, 0, 0, 0.866);color: rgb(171, 171, 158);}</style></head>
<body>
<h1>Associando scripts a Campos e formulários - Jogo de Advinhação Melhorado</h1><br>

<a1><script>maxTentativas = 2; document.write(`Tente advinhar um número de 1 a 99, em ${maxTentativas} tentativas`);</script></a1><br>
<input/><button>Compare com o meu segredo</button>
<p id="message"></p>



<script>
    var segredo = (Math.random() *100).toFixed(0);
    document.write(segredo);
    tentativas = 1;
    var button = document.querySelector("button");
    var input = document.querySelector("input");
      const messageTag = document.querySelector("#message");
    input = parseInt(input.value);
    button.onclick = verifica;

    function verifica() {
        if (tentativas <= maxTentativas) {

        var input = document.querySelector("input");
        input = parseInt(input.value);

            if (input == segredo) {
                alert("Parabéns! Você acertou! Recarregue a página se desejar jogar novamente!");

            } if (tentativas <= (maxTentativas - 1)) {

                messageTag.innerText = "Tente de novo";

            } else {
                alert(`Você stingiu o número máximo de tentativas, o número exato é: ${segredo}! Recarregue a página se desejar jogar novamente!`);
            }   
        tentativas++;
        }   
    }

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

    button.onclick = verifica;


</script>
</body>
</html>
por Cassio Viana Da Silva
| 109.3k xp | 5 posts

Obrigado amigos.