Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

document.write sem apagar a interface anterior

Olá! Como eu faço um document.write (com as frases de erro/acerto) sem que isso apague toda interface do jogo e demande um F5?

<meta charset="UTF-8">


<br> 
<h1>Jogo de adivinhar!</h1>
<br>
<input> < Digite seu palpite aqui!
<br>
<button>Veja se acertou!</button>  


<script>


    var quantidadeSorteados = sorteiaNumero(10);
    var palpite = document.querySelector ("input");
    palpite.focus ();
    var botao = document.querySelector ("button");
    botao.onclick = verifica;
    var numerosSorteados = quantidadeSorteados


function sorteiaNumero(quantidade) {

    var contador = 1;
    var numerosSorteados = [];


    while (contador <= quantidade) {


        var sorteio = numeroSorteado();
        var numeroRepetido = false;


        for ( var i = 0; i < numerosSorteados.length; i++) {
            if (numerosSorteados[i] == sorteio) {
                numeroRepetido = true;
                break;
            }

        } 
            if (numeroRepetido == false) {
                numerosSorteados.push (sorteio);
                contador++;
            }
    }
return numerosSorteados;   
}



function numeroSorteado(){

    return Math.round(Math.random() *10);
}



function verifica() {

        var achou = false;

        for(var i = 0; i < numerosSorteados.length; i++) {

            if(palpite.value == numerosSorteados[i]) {

                document.write("Você ACERTOU!");
                achou = true;
                break;
            }
        }

        if(achou == false) {

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


        palpite.value = "";
        palpite.focus();        
}

console.log (numerosSorteados);

</script>
2 respostas
solução!

Fala Renan, tudo bem?

Não é possível de usar o document.write sem apagar a interface anterior, porém existem outros metodos parecidos. Como o innerText que é possivel definir ou obter o texto do elemento!

Então você poderia criar algum elemento no seu html para estar colocando essa sua mensagem, por exemplo um p e após isso colocar o texto dentro dele após executar tal ação. Veja um exemplo:

No HTML:

    <p id="resposta"></p>

No JavaScript:

    var paragrafoResposta = document.querySelector("#resposta")

     if (palpite.value == numerosSorteados[i])  {
          paragrafoResposta.innerText = "Você acertou!"
              achou = true;
              break;
          }

O que fizemos no exemplo acima foi criar o elemento no HTML (nesse caso o paragrafo) e selecionamos ele no JavaScript usando o querySelector, e setamos o texto de dentro dele com o innetText

Essa foi uma forma que subtituí esse document.write. Espero ter ajudado :)

Obrigado pela resposta, Mateus!

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software