button.onclick retornando

Boa madrugada,

estou com o seguinte problema: venho tentando exercitar os problemas de "butto.onclick" em um outro modelo de exemplo que eu desenvolvi nos exercicios anteriores a fim de brincadeira/estudo...

<meta charset="UTF-8">

<h1>O que abastecer e qual a economia do meu carro</h1>

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

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

        function calculaCombustivel(kilometragemInicial, kilometragemAtual, litrosConsumidos) {
            return (kilometragemAtual - kilometragemInicial) / litrosConsumidos;
        }

        var gasolina = Number(prompt("Coloque aqui o valor da gasolina na bomba:"));
        var alcool = Number(prompt("Coloque aqui o valor do alcool na bomba:"));
        var diferenca = (alcool / gasolina) * 100;

        var kilometragemInicial = parseInt(prompt("Coloque sua kilometragem inicial aqui:"));
        var kilometragemAtual = parseInt(prompt("Coloque sua kilometragem atual aqui:"));
        var litrosConsumidos = parseInt(prompt("Coloque seu consumo de combustível em Litros aqui:"));

        var kilometragemDiferenca = kilometragemAtual - kilometragemInicial;
        var consumo = calculaCombustivel(kilometragemInicial, kilometragemAtual, litrosConsumidos);
        var proximoAbastecimento = kilometragemAtual + kilometragemDiferenca

        if (diferenca >= 70) {
            mostra("Está compensando abastecer GASOLINA!");
        }

        if (diferenca < 70) {
            mostra("Está compensando abastecer ALCOOL!");
        }

        mostra("O seu carro anda " + consumo + " km por cada Litro de combustível colocado!");
        mostra("Seu próximo abastecimento, provavelmente, será quando o marcador chegar a " + proximoAbastecimento + " km!")
    </script>
</html>

Tentando remover os popups e torna-los nas caixas <input/> com o seguinte codigo:

<meta charset="UTF-8">

Kilometragem inicial do carro: <input/1><br>
Kilometragem atual do carro: <input/2><br>
Quanto foi abastecido (em Litros)? <input/3><br><br>
<button>Calcule o consumo de combustível por kilometro rodado</button>

<script>

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

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

    function verifica(input1, input2, input3) {


        var kilometragemInicial = document.querySelector("input1");
        var kilometragemAtual = document.querySelector("input2");
        var litrosConsumidos = document.querySelector("input3");

        alert((kilometragemAtual - kilometragemInicial) / litrosConsumidos);
        }

    var button = document.querySelector("button");

    button.onclick = verifica;

</script>

Mas, como descrito no titulo, minhas tentativas somente resultam em "zero" e "NaN". O que estou fazendo de errado neste codigo?

Luan, boa tarde!

No seu html os inputs precisam estar identificados com algo, pra isso nós colocamos o atributo íd no elemento, ficando assim:

<input type="text" id="input1">
<input type="text" id="input2">
<input type="text" id="input3">

A lógica está correta, porém após fazer o querySelector()' você precisa passar um seletor mais especifico pra ele o parâmetro que você passa pra ele precisa ser o id do input que nós identificamos como#` sendo assim ficaria assim

var kilometragemInicial = document.querySelector("#input1");
        var kilometragemAtual = document.querySelector("#input2");
        var litrosConsumidos = document.querySelector("#input3");

Se você der um console.log(kilometragemInicial) verá que ele retorna algo que não é o valor que estava escrito. e sim o elemento todo. Esse elemento nós chamamos de node esse node é como se fosse uma pessoa, ele tem algumas características, e uma delas é o valor, nós podemos pegar esse valor apenas adicionando o .value no final do querySelector().

Perceba que se você fizer a conta sem colocar o value, o retorno vai ser NaN pq ele é um elemento e não o valor do elemento

var kilometragemInicial = document.querySelector("input1").value;
        var kilometragemAtual = document.querySelector("input2").value;
        var litrosConsumidos = document.querySelector("input3").value;

Espero ter te ajudado, qualquer dúvida só mandar nó fórum