Document.write function does not write two messages

Question

I started a month and a half ago the studies and the small code below is not writing the name and points of the two teams informed, only one. If I remove the code to write the data of the first team it displays the result of the second normally. I also replaced Document.write in the 'show' function by the.log console and in the console displays the results of both teams normally. I read in some articles that the Document.write method erases the previous information, but I don’t understand how it works. If anyone can help me, I’d appreciate it.

    <script>

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

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

        function perguntaJogosECalcRes (nomTime) {
            var vit = prompt ("Quantos jogos o time " + nomTime + " venceu?");
            var emp = prompt ("Quantos jogos o time " + nomTime + " empatou?");
            var pontos = (vit * 3) + parseInt (emp, 10);
            return pontos;
        }

        var nomTime1 = prompt ("Qual o nome do primeiro time?");
        var nomTime2 = prompt ("Qual o nome do segundo time?");

        var ponTime1 = perguntaJogosECalcRes (nomTime1);
        var ponTime2 = perguntaJogosECalcRes (nomTime2);

        mostra (nomTime1 + " " + ponTime1);
        mostra (nomTime2 + " " + ponTime2);

    </script>

Answer 1

The Document.write function is full of quirks. For example, it does different things while the document is loading and after it has finished loading.

If you want to print some things for debugging, you’d better use console.log

If you want to show something to the user, use the DOM methods:

function mostra(frase)
    var span = document.createElement("div");
    var text = document.createTextNode(frase);
    span.appendChild(text);

    document.body.appendChild(span);
}