Programa simples + Dúvida

Oi Emanoel

Você pode substituir o mostra por alert, assim a tela não é apagada.

O que acontece é que o document.write substitui tudo que está no html.

Poderia ficar assim:

<meta charset="utf-8" />
<h1>
  Quanto é 5 x 5?
  <h1>
    <input />
    <button>Ver resultado!</button>

    <script>
      function verifica() {
        if (input.value == 25) {
          var numero = 25;

          var multiplicação = 5 * 5;

          alert('O resultado é ' + multiplicação);
        } else {
          alert('Você errou!');
        }
      }

      var input = document.querySelector('input');
      var button = document.querySelector('button');

      button.onclick = verifica;
    </script>
  </h1>
</h1>

Obrigado! Adicionei também:

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

Achei importante o usuário não ter que clicar na barra o tempo todo :D

<meta charset="utf-8">



<h1>Quanto é 5 x 5?<h1>
<input/>
<button>Ver resultado!</button>


<script>


    function pulaLinha() {
      document.write("<br>");
    }

    function mostra(texto) {
      document.write(texto);
      pulaLinha();
    }

    function verifica(){

    if (input.value == 25) {

        var numero = 25

        var multiplicação = 5 * 5;

        alert("Acertou! O resultado é " + multiplicação);

    }else{

        alert("Você errou!");

    }

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

}

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

    button.onclick = verifica;

</script>

Oi Emanoel

Muito bom, a experiência do usuário é muito importante mesmo, atualmente existe até uma área só pra isso chamada de UX (User Experience).

Parabéns pelo empenho nos estudos e qualquer dúvida pode contar com a gente.