Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
4
respostas

Programa Retorna NaN

Referente ao curso JavaScript e HTML: desenvolva um jogo e pratique lógica de programação

por Edson
| 58.9k xp | 8 posts

estou tentando pegar dois valores de dois inputs e usando eles numa função e mostrar o resultado quando clico no botão. Mas retorna NaN. 

<meta charset="UTF-8">

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

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


<script>


var kilometros = document.querySelector("#input1").value;

var litros = document.querySelector("#input2").value;


function calculaConsumo(a, b){
    var resultado = kilometros/litros;
    alert(resultado);
}

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


</script>
4 respostas
por Mateus de Moraes
| 38.7k xp | 7 posts
ANALISTA E DESENVOLVIMENTO DE SISTEMAS

Ao invés de só .value, coloque .valueAsNumber, isso deve resolver esse problema ai. Você pode ler mais nessa página aqui: https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement

solução!
por Mateus de Moraes
| 38.7k xp | 7 posts
ANALISTA E DESENVOLVIMENTO DE SISTEMAS

Fiz dessa forma aqui e funcionou: 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <h3>Álcool ou Gasolina?</h3>
        <p>Entre com os kilômetros</p>
        <input type="number" id="input1"/>
        <p>Entre com os litros</p>
        <input type="number" id="input2"/>
        <button>calcula consumo</button>
    </body>
    <script>

        function calculaConsumo(){

            var kilometros = document.querySelector("#input1").valueAsNumber;
            var litros = document.querySelector("#input2").valueAsNumber;

            var resultado = kilometros / litros;
            alert(resultado);
            return resultado;
        }


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



    </script>
</html>

O que eu fiz foi estabelecer o type dos campos como type="number", depois colocar as variáveis que chamam os campos no contexto da função, ou seja, dentro do bloco da função (não funciona se as variáveis estiverem fora). E por último, alterei o método para pegar o valor do campo de ".value" para " .valueAsNumber" .

por Simon Alexandre Lemos Paes Viegas
| 22.2k xp | 3 posts

EDIT Minha resposta foi iniciada antes da resposta anterior... mas chegamos mais ou menos ao mesmo resultado.. :)

--

Edson, vejamos o trecho inicial do script:

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

Observe que, como a execução do código é sequencial, logo ao abrir a página, as variáveis kilometros e litros já serão setadas, ou seja, vão ficar com NaN... independente do que for inserido no input depois. Perceba que variável NÃO é atualizada novamente após clicar no botão...

Daí, seria necessário que a "busca pelos valores que estão no input" sejam feitas só após o clique lá no botão. Algo assim já funcionaria:

<script>
  function calculaConsumo() {
    var quilometros = document.querySelector("#input1").value;
    var litros = document.querySelector("#input2").value;
    var resultado = quilometros / litros;

    alert(resultado);
  }

Adendo: se atente também que as variáveis kilometros e litros estão como string mesmo, mas a conta funciona. (Teria que se aprofundar um pouco para entender como funciona essa "conversão automática" lá no cálculo.)

Caso queria utilizar como Number, uma forma seria como citado pelo MATEUS DE MORAES, ou seja, utilizando o valueAsNumber. Entretanto, é necessário antes definir o tipo do input como "number". Segue código completo para exemplificar: 

<meta charset="UTF-8">

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

<p>Entre com os quilômetros</p>
<input id="input1" type="number" />
<p>Entre com os litros</p>
<input id="input2" type="number" />
<button>Calcular consumo</button>

<script>
  function calculaConsumo() {
    var quilometros = document.querySelector("#input1").valueAsNumber;
    console.log(typeof quilometros);
    var litros = document.querySelector("#input2").valueAsNumber;
    var resultado = quilometros / litros;

    alert(resultado);
  }

  var button = document.querySelector("button");
  button.onclick = calculaConsumo;
</script>

O resulto final vai ser o mesmo.

por Edson
| 58.9k xp | 8 posts

Valeu SIMON e MATEUS. Agora entendi o meu erro, o programa estava lendo vazio nos inputs antes mesmo de eu digitar o valor, além disso, a chamada dos inputs ficam dentro da função.