Porque se troco o alert por document.write apaga o que escrevo em HTML

<meta charset="utf-8"> <input/> <button>Compare com o meu segredo</button> <script> function verifica() { if(input.value == segredo){ document.write("Você acertou"); }else{ document.write("Você errou!"); }} var segredo = 5; var input = document.querySelector("input"); var button = document.querySelector("button"); button.onclick = verifica; </script>

Olá, Nicolas, isso ocorre porque no final do código nós pedimos para o sistema executar a função verifica após o clique no botão (button.onclick) e, como as linhas de comando responsáveis por exibir o campo de texto e o botão estão fora do bloco dessa função, ele só executa "document.write".

Chamar essa função equivale a dizer para o sistema: "quando eu clicar no botão, escreva (write) a frase 'Você acertou/errou!' na página".

É bom lembrarmos que o objeto document refere-se à página web propriamente dita. Por isso, tudo o que vier depois do ponto quando utilizamos este comando, será executado na página.

Já o alert é responsável apenas por exibir uma caixa de diálogo, ou seja, é independente do conteúdo da página em si. São duas coisas distintas.

Assim, quando utilizamos o "alert" o conteúdo da página é mantido (campo e botão) enquanto a mensagem aparece na caixa de diálogo, independentemente da página.

Para que a mensagem seja exibida mantendo o campo e o botão na página, o código deve ser ajustado assim:

<meta charset="utf-8">

<input/>
<button>Compare com o meu segredo</button>

<script>
    function verifica() {

        document.write("<input/>" + "<button>Compare com o meu segredo</button>"); 

            if(input.value == segredo){
                document.write("Você acertou");
            }else{
                document.write("Você errou!");
             }
            }

    var segredo = 5;

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

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

    button.onclick = verifica;


</script>

Ou seja, as linhas de comando referentes à exibição do campo e do botão (que estão no mundo html) devem fazer parte da instrução contida no bloco da função "verifica" (mundo JavaScript). Assim, campo e botão permanecem na página mesmo após o clique no botão.

Espero ter contribuído para esclarecer sua dúvida. Bons estudos!

Trilhas por carreira

Carreiras de IA

Carreiras de Dados

Carreiras de Cyber

Carreiras de DevOps & Cloud

Carreiras de UX & UI

Carreiras de Mobile & Front-End

Carreiras de Back-End

Carreiras de Negócios

Cursos universitários FIAP

Tópicos relacionados

Conteúdos Alura com o tema