Why does document.write launch me to other page when the operation is complete?

Question

I'm a beginning learner of JS, and my problem is that when I make some easy problems and the final result will be launched for document.write, It's launched to another page, Is there any way to make that the final result appear on the same page where is located my main contain? I leave my code here.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Villa Platzi</title>
    <style>
        body {
            text-align: center;
            background-color: #E5FFC0;
        }
        h2 {
            font-size: 30px;
            font-family: 'Franklin Gothic Medium';
            color: #325500;
        }
        p {
            font-family: 'Courier';
            font-weight: bold;
        }
    </style>
</head>
<body>
    <section>
        <h2>Generador de números aleatorios</h2>
        <p>Genera números de manera aleatoria según los parámetros que especifiques.</p>
        <p>Coloca los datos gustes para generar los números (recuerda llenar todos los campos).</p>
        <p>
            Primer Parámetro <input type="number" id="P1">
            Segundo Parámetro <input type="number" id="P2">
            Número de cifras a generar <input type="number" id="P3">
        </p>
        <p>
            <input type="button" id="B1" value="Empezar">
        </p>
    </section>
    <section>
        <script src="villa.js"></script>
    </section>
</body>
</html>

var z;
var p1;
var p2;
var num;

var par1 = document.getElementById("P1");
var par2 = document.getElementById("P2");
var par3 = document.getElementById("P3");

var bot1 = document.getElementById("B1");

bot1.addEventListener("click", (Cambiarp1 = () => (p1 = par1.value)));
bot1.addEventListener("click", (Cambiarp1 = () => (p2 = par2.value)));
bot1.addEventListener("click", (Cambiarp1 = () => (num = par3.value)));
bot1.addEventListener("click", imprimir)

function imprimir() {
    for(i = 0; i < num; i++) {
    var z = aleatorio(p1, p2);
    document.write(z + ", ");
    }
}

function aleatorio(min, max) {
    var resultado = Math.round(Math.random() * (max - min + 1) + min);
    return resultado;
}

Pd: I know that is wrong using CSS in HTML, but it's just because it's a little project to practice. Here some SSs for more context about my problem.

Why does document.write launch me to other page when the operation is complete?

0 Answers0