Mensagem exibida somente após o loop.

Porque as mensagens só são exibidas quando o loop termina? Como faço pra resolver isso?

<meta charset="utf-8">

<script>
    function pulaLinha(){
        document.write("<br>");
    }
    function mostra(frase){
        document.write(frase);
        pulaLinha();
    }
    function sorteia(n){
        return Math.round(Math.random() * n);
    }

    var numeroPensado = sorteia(10);
    var chute;

    for(i = 0; i < 3; i++){
        chute = parseInt(prompt("Já pensei. Qual você acha que é?"));
        if(chute == numeroPensado){
            mostra("Uau! Você acertou, pois eu pensei no " + numeroPensado);
            break;
        }
        else{
            if(chute > numeroPensado){
                mostra("Você errou! Seu chute é maior que o número pensado!");
            }
            else{
                mostra("Você errou! Seu chute é menor que o número pensado!");
            }
        }
    }
</script>