Passar um evento de JS para Jquery

Boa tarde, Lucas! Como vai?

O que pude perceber é que no seu código JQuery está faltando }) no final do seu código! Deveria ficar assim:

var botaocalculaDeltat = $("#calcula_deltat")
botaocalculaDeltat.on("click", function(){
    event.preventDefault();

    var div = $("#resultado_deltat");
    var formDeltaT = $("#form_deltat");
    var Ti = formDeltaT.tempo_inicial.val();
    var Tf = formDeltaT.tempo_final.val();
    var DeltaT = parseFloat(Tf) - parseFloat(Ti);

    var passo1 = document.createElement('p');
    var passo2 = document.createElement('p');
    var resultadop = document.createElement('p');

    var passo1  = "<p> Δt = Tf - Ti </p>";
    var passo2 = " <p> Δt = |" + Tf + "-" + Ti + "| </p>";
    var resultado = "<p> Δt = " + Math.abs(DeltaT) + "s </p>";

    div.append(passo1);
    div.append(passo2);
    div.append(resultadop);
}); // faltou essa linha!

Veja se com isso o seu problema é resolvido! Caso ainda tenha algum problema é só falar aqui que eu tentarei te ajudar!

Grande abraço e bons estudos!

O código funcionou em partes... Eu não entendi pq deu essa mensagem Uncaught TypeError: Cannot read property 'val' of undefined at HTMLButtonElement. (calculo_deltas_do_movimento.js:7) at HTMLButtonElement.dispatch (jquery.js:5110) at HTMLButtonElement.elemData.handle (jquery.js:4918)

Opa, Lucas! Então, a mensagem de erro diz que não foi possível ler a propriedade val de undefined na linha 7 do arquivo calculo_deltas_do_movimento.js. Eu imagino que a linha 7 seja essa:

var Ti = formDeltaT.tempo_inicial.val();

Estou certo?

Outra coisa, vc poderia mandar tbm o HTML completo da sua página? Eu já imagino qual seja o problema mas quero dar uma olhada no HTML apenas pra ter certeza.

HTML

                <fieldset>
                    <form class="formulario" id="form_deltat">
                        <h2 class="titulo_formula">Variação de tempo (&Delta;t)</h2>
                        <label>Tempo inicial</label>
                        <input class="campo" id="deltat_ti" type="number" name="tempo_inicial" placeholder="Defina em segundos" class="campo_calculo" required="">
                        <label>Tempo final</label>
                        <input class="campo" id="deltat_tf" type="number" name="tempo_final" placeholder="Defina em segundos" class="campo_calculo" required="">
                        <button class="botao" id="calcula_deltat">Calcular</button>
                        <div class="resultado" id="resultado_deltat"></div>
                    </form>
                </fieldset>

<!--Resto do código-->
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/calculo_deltas_do_movimento.js"></script>

Opa, Lucas! Então, o problema é que quando vc seleciona um elemento do DOM com JS (usando o document.querySelector()) e com jquery (usando o $()) são retornados objetos diferentes e, consequentemente, que funcionam de forma diferente! No primeiro caso é retornado o próprio elemento do DOM que foi selecionado e, por isso, vc consegue acessar os elementos filhos da forma que vc fez. No entanto, no caso do jquery, o que é retornado um objeto jquery que encapsula o elemento do DOM selecionado. Para ver a diferença, inclua a linha console.log(formDeltaT) após a seleção do formulário tanto no caso do JS puro quanto no caso do código jquery que vc vai ver na prática a diferença!

Conclusão: quando vc tentava acessar os elementos do formulário selecionado fazendo da mesma forma que fez com JS puro acabava dando erro.

SOLUÇÃO:

Vc irá precisar usar um método do jquery chamado children() e passar um seletor CSS para ele, dessa forma:

<script>
        var botaocalculaDeltat = $("#calcula_deltat")
        botaocalculaDeltat.on("click", function(){
            event.preventDefault();

            var div = $("#resultado_deltat");
            var formDeltaT = $("#form_deltat");
            var Ti = formDeltaT.children('input[name="tempo_inicial"]').val();  // seleção do elemento input filho com name="tempo_inicial".
            var Tf = formDeltaT.children('input[name="tempo_final"]').val();  // seleção do elemento input filho com name="tempo_final".
            var DeltaT = parseFloat(Tf) - parseFloat(Ti);

            var passo1 = document.createElement('p');
            var passo2 = document.createElement('p');
            var resultadop = document.createElement('p');

            var passo1  = "<p> Δt = Tf - Ti </p>";
            var passo2 = " <p> Δt = |" + Tf + "-" + Ti + "| </p>";
            var resultadop = "<p> Δt = " + Math.abs(DeltaT) + "s </p>";  // aqui eu tbm corrigi o nome da variável acrescentando a letra p no final.

            div.append(passo1);
            div.append(passo2);
            div.append(resultadop);
        });
</script>

PARA SABER MAIS:

Documentação do método children() do jquery: https://api.jquery.com/children/

Pegou a ideia? Qualquer coisa é só falar!

Grande abraço e bons estudos!

Nossa, vc me ajudou MUITOOOO

Obg!

Por nada, Lucas! Sempre que tiver alguma dúvida ou precisar de alguma ajuda é só mandar aqui no fórum!

Grande abraço e bons estudos, meu aluno!