2
respostas

Como usar texto ao invés de alerta?

Eu gostaria de não usar a função alert() para mostrar que o chute está certo ou errado, então eu mudei para "

if(input.value == segredo) {

        document.write("Você ACERTOU!");
        } else {

    document.write("<br>");
        document.write("Você ERROU!!!!!!!!");
        }

"

Mas, quando aperta-se o botão para ver se está certo, a caixa de entrada/input desaparece. O que está acontecendo? "

<meta charset="UTF-8">

<input/>
<button>Chute entre 0 e 10</button>

<script>
    var segredo = Math.round(Math.random() * 10);

    var input = document.querySelector("input");
        input.focus();

    function verifica() {

        if(input.value == segredo) {

        document.write("Você ACERTOU!");
        } else {

        document.write("<br>");

        document.write("Você ERROU!!!!!!!!");
        }

                input.value = "";
                input.focus();

    }

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


    button.onclick = verifica;

document.write("<br>");
document.write("<br>");
document.write(segredo);
</script>

"

2 respostas
<meta charset="UTF-8">

<input/>
<button>Chute entre 0 e 10</button>

<script>
    var segredo = Math.round(Math.random() * 10);

    var input = document.querySelector("input");
        input.focus();

    function verifica() {

        if(input.value == segredo) {

        document.write("Você ACERTOU!");
        } else {

        document.write("<br>");

        document.write("Você ERROU!!!!!!!!");
        }

                input.value = "";
                input.focus();

    }

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


    button.onclick = verifica;

document.write("<br>");
document.write("<br>");
document.write(segredo);
</script>

Oi Alexandre, como você está? Espero que esteja bem ^-^

Sinto muito pela demora em obter um retorno.

Precisamos adicionar uma tag de parágrafo no código html para que seja possível adicionar o texto na mesma página que está o input. Da forma como o seu código está, quando apertamos o botão para conferir a resposta, através da instrução document.write o código irá sobreescrever o html existente na página. E para que ele não seja sobrescrito, vamos adicionar o texto no html já existente. Veja em código as mudanças:

var respostaCertaOuErrada =  document.querySelector("p");
respostaCertaOuErrada.innerText = "Você ACERTOU!";

Na primeira instrução, selecionamos a tag p do nosso html. Já na segunda, através da propriedade innerText adicionamos o texto dentro da tag p.

Também é necessário fazer um novo sorteio do número após o acerto ou erro.

Segue abaixo o código completo com as modificações:

<meta charset="UTF-8" />

<input />
<button>Chute entre 0 e 10</button>
<p></p>

<script>
  var segredo = Math.round(Math.random() * 10);

  var input = document.querySelector("input");
  var respostaCertaOuErrada = document.querySelector("p");

  input.focus();

  function verifica() {
    if (input.value == segredo) {
      respostaCertaOuErrada.innerText = "Você ACERTOU!";
    } else {
      respostaCertaOuErrada.innerText= "Você ERROU!!!!!!!!";
      segredo = Math.round(Math.random() * 10);
    }
    segredo = Math.round(Math.random() * 10);
    console.log(segredo);
    input.value = "";
    input.focus();
  }

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

  button.onclick = verifica;
</script>

Qualquer dúvida estou por aqui, tá bom?

Abraços e bons estudos!