Como faço para capturar dados de dois inputs

<meta charset="UTF-8">

<h1>Cálculo do consumo de combustível</h1><br>

<p>Entre com os kilômetros</p>
<input  type="number"  name="input1">
<p>Entre com os litros</p>
<input type="number"  name="input2" >
<button>calcula consumo</button>


<script>

var litros = document.querySelector("#input1").value;
var litro = litros.value;
var kilometros = document.querySelector("#input2").value;
var kilometro = kilometros.value;


function calculaConsumo(kilometros, litros){
    var consumo = (kilometro/litro);
    alert(consumo);
    return consumo;
}

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

</script>

Quero capturar dados de duas tag input para que esses dados sejam usados numa função chamada ao clicar no button. A função está me retornando NaN, mesmo colocando o dado como parseInt(document.querySelector("#input1").value);