Ainda não tem acesso? Estude com a gente! Matricule-se
Ainda não tem acesso? Estude com a gente! Matricule-se

Programa com mais de 1 input em html

Olá pessoal, Meu código não calcula. Ele traz "NaN". Estou batendo cabeça mas não acho o problema :(

<meta charset="UTF-8">

<h1>Consumo do meu carro:</h1>

1) Km inicial: <input type="text" id="input1"><br><br>
2) Km atual (após viagem): <input type="text" id="input2"><br><br>
3) Abastecido (litros)? <input type="text" id="input3"><br><br><br><br>
4) Calcule o consumo de combustível por km rodado: <button>Calcule!</button>

<script>
    var input1=document.querySelector("#input1").value;
    var input2=document.querySelector("#input2").value;
    var input3=document.querySelector("#input3").value;

    function verifica(){
        alert((input1-input2)/input3);
        }

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

    button.onclick=verifica;

</script>
1 resposta

O valor pego nos inputs é uma string, por isso acontece o erro, pode resolver adicionando o operador '+' antes de document.querySelector... Ou pode também converter para número com parseInt ou parseFloat