Como imprimir de acordo com os dados de <input> | JavaScript

Oi, tudo bom? Estou desenvolvendo um projeto pessoal de calculo de fórmulas de física. Ele passou por diversas mudanças assim que eu fui avançando nos meus cursos. Em sua primeira versão ele era todo em js dentro de HTML:

<script> 
function pulaLinha() {

    document.write("<br>");
    document.write("<br>");
    }

    function texto(frase) {

    document.write(frase);
    pulaLinha();
    }

    var Vi = parseFloat(prompt("Informe o valor da velocidade inicial em m/s"));
    var Vf  = parseFloat(prompt("Informe o valor da velocidade final em m/s"));
    var Variação =  Math.abs(Vf -Vi)

    texto("Delta V = Vf - Vi")
    texto("Delta V = " + Vf + "-" + Vi)
    texto("Delta V = " + Variação);

    texto(" Houve uma variação de " + Variação + " m/s");
</script>

Mas agr estou tentando criar uma relação com o html e atualmente ele está assim:

HTML:


            <h4 class="incognita"> Variação de velocidade: &Delta;V = Vf - Vi  </h4>
            <form id="Dados-deltav">

                   <div class="grupo">
                    <label for="velocidade-inicial">Velocidade Inicial:</label>
                    <input id="velocidade-inicial" name="velocidade-inicial" type="text" placeholder="Digite o valor de v em m/s" class="campo">
                  </div>

                  <div class="grupo">
                        <label for="velocidade-final">Velocidade Final</label>
                        <input id="velocidade-final" name="velocidade-final" type="text" placeholder="Digite o valor v m/s" class="campo">
                </div>
                <button id="calcule-deltav"> Calcule! </button>
            </form>
            </section>

JS:

var vi = document.querySelector("#velocidade-inicial");
var vf = document.querySelector("#velocidade-final");

var botaodeltav = document.querySelector("#calcule-deltav");

botaodeltav.addEventListener("click", function(event) {
event.preventDefault();

var form = document.querySelector("#Dados-deltav");

var velocidadeInicial = vi.value;
var velocidadeFinal = vf.value;

var Deltav = velocidadeFinal-velocidadeInicial;

var Deltavp = document.createElement("p");
form.appendChild(Deltavp);

Deltavp.textContent = Math.abs(Deltav);
});

Ai eu gostaria de saber como eu posso mostrar o passo-a-passo da conta criando uma relação com "< input >" igual eu mostrava o passo-a-passo nessas linhas:

    texto("Delta V = Vf - Vi")
    texto("Delta V = " + Vf + "-" + Vi)
    texto("Delta V = " + Variação);

Olá Lucas, veja se consegue usar a função que você criou anteriormente, assim:

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

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

var vi = document.querySelector("#velocidade-inicial");
var vf = document.querySelector("#velocidade-final");
var botaodeltav = document.querySelector("#calcule-deltav");

botaodeltav.addEventListener("click", function(event) {
    event.preventDefault();

    var form = document.querySelector("#Dados-deltav");
    var velocidadeInicial = vi.value;
    var velocidadeFinal = vf.value;
    var Deltav = velocidadeFinal-velocidadeInicial;

    texto("Delta V = Vf - Vi")
    texto("Delta V = " + velocidadeFinal + "-" + velocidadeInicial)
    texto("Delta V = " + Deltav);

    var Deltavp = document.createElement("p");
    form.appendChild(Deltavp);
    Deltavp.textContent = Math.abs(Deltav);
});