1

Estou tentando fazer uma calculadora em JavaScript/HTML, mas está dando um erro de NaN nas entradas do usuário, mesmo usando um parseFloat, ele ainda diz que não é um número, alguém poderia me dizer como resolver isso?

var num1 = parseFloat(document.getElementById("n1").value);
var num2 = parseFloat(document.getElementById("n2").value);
function calculate(op) {
    var opV = document.getElementById("op");
    var operator = op.value;
    opV.value = operator;
    var res = 0;
    res = eval(num1 + operator + num2);
    var resV = document.getElementById("result");
    resV.value = res;

}
<!DOCTYPE html>
<html lang="pt_br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Calculator</title>
    <link href="https://fonts.googleapis.com/css2?family=Lexend+Tera&display=swap" rel="stylesheet">
    <link rel="shortcut icon" href="data:image/png;base64,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" type="image/x-icon">
    <style>
        * {
            font-family: 'Lexend Tera', sans-serif;
        }
        body {
            background: white;
        }
        div#calculator {
            margin: 0;
            margin-top: 50px;
            width: 400px;
            height: 150px;
            padding: 50px;
            background-color: rgb(209, 209, 209);
            border-radius:  15px;
            margin-left: 30%;

        }
        input[name=operator] {
            width: 30px;
            height: 25px;
            text-align: center;
        }
        input[type=number] {
            width: 150px;
            height: 25px;
            border: none;
            background-color: rgb(221, 221, 221);
        }
        button[id=opr] {
            width: 175px;
            border:1px;
        }
        span {
            background-color: rgb(209, 209, 209);
            padding: 10px;
            border-radius: 50px;
            padding-left: 20px;
            padding-right: 80px;
            margin-left: 30%;
            padding-bottom: 20px;
            padding-top: 100px;
        }
        input[id=result] {
            margin-top: 10px;
            width:  350px;
            height: 30px;
        }
    </style>
</head>
<body>
    <span>
        Calculator<br>
    </span>
    <div id="calculator">
        <header>
            <input type="number" name="number1" id="n1" placeholder="Enter a number">
            <input type="text" name="operator" id="op" value=" " disabled>
            <input type="number" name="number2" id="n2" placeholder="Enter a number">
        </header>
        <main>
            <button name="+" id="opr" value="+" onclick="calculate(this)">+</button>
            <button name="-" id="opr" value="-" onclick="calculate(this)">-</button>
            <button name="x" id="opr" value="*" onclick="calculate(this)">x</button>
            <button name="/" id="opr" value="/" onclick="calculate(this)">/</button> 
        </main>

        <input type="text" id="result" disabled placeholder="Result">
    
    </div>
</body>
</html>

4
  • já experimentou colocar as duas linhas dentro da função?
    – user60252
    9/06/2020 às 15:41
  • @LeoCaracciolo valeu, nem pensei que poderia ser isso, funcionou.
    – GabrielB
    9/06/2020 às 15:45
  • Sobre o uso de eval, vale a pena ler aqui e aqui
    – hkotsubo
    9/06/2020 às 15:46
  • Ok valeu @hkotsubo
    – GabrielB
    9/06/2020 às 15:55

2 Respostas 2

2

Como já disseram, o problema é que você carrega os valores do input antes que eles sejam preenchidos, então o valor deles não é um número, e por isso parseFloat retorna NaN.

Mas ao contrário do que afirmou a outra resposta, eu acho importante chamar parseFloat sim. Pois se você clicar em uma das operações sem preencher os números, a string gerada terá apenas o símbolo correspondente à operação, dando erro no eval. Mesmo se apenas um deles não for preenchido, ainda sim gerará uma expressão inválida.

E vale lembrar que usar input type="number" não te garante que só serão digitados números. O Firefox, por exemplo, permite que se digitem letras e quaisquer outros caracteres, o que com certeza irá gerar uma expressão inválida e dar erro no eval. E o Chrome, mesmo não permitindo qualquer texto arbitrário, ainda permite que se digite coisas como e....eeee (já que o ponto é um caractere válido para digitar números com casas decimais, como 2.5, e o e é usado em notação científica, como 3.4e2 para representar o número 340, então ele permite esses caracteres, mesmo que o resultado não seja um número válido), então se você não chamar parseFloat e concatenar as strings diretamente, o eval dará erro também.

Quanto ao uso do eval em si, eu particularmente prefiro não usar (veja mais detalhes aqui e aqui). Para o caso em que qualquer coisa for digitada (como no já citado Firefox), a pessoa pode digitar qualquer comando válido em JavaScript, e este será executado.

Claro que para um exercício simples isso não é um grande problema, mas de forma geral, você não precisa do eval (pode parecer fácil e eu entendo a "tentação" de usá-lo, mas se for fazê-lo, deve tomar os cuidados de sanitizar as entradas para evitar maiores problemas - leia os links já indicados para saber mais).

Enfim, uma forma de fazer, verificando se foram digitados números e sem usar eval, seria:

function calculate(op) {
    document.getElementById("op").value = op.value;
    var num1 = parseFloat(document.getElementById("n1").value);
    var num2 = parseFloat(document.getElementById("n2").value);
    if (isNaN(num1) || isNaN(num2)) {
        alert('não foram digitados os 2 números');
    } else {
        var res = document.getElementById("result");
        switch(op.value) {
            case '+':
                res.value = num1 + num2;
                break;
            case '-':
                res.value = num1 - num2;
                break;
            case '*':
                res.value = num1 * num2;
                break;
            case '/':
                res.value = num1 / num2;
                break;
        }
    }
}
<div id="calculator">
    <header>
        <input type="number" name="number1" id="n1" placeholder="Enter a number">
        <input type="text" name="operator" id="op" value=" " disabled>
        <input type="number" name="number2" id="n2" placeholder="Enter a number">
    </header>
    <main>
        <button name="+" id="opr" value="+" onclick="calculate(this)">+</button>
        <button name="-" id="opr" value="-" onclick="calculate(this)">-</button>
        <button name="x" id="opr" value="*" onclick="calculate(this)">x</button>
        <button name="/" id="opr" value="/" onclick="calculate(this)">/</button> 
    </main>

    <input type="text" id="result" disabled placeholder="Result">
</div>

Removi aquele monte de CSS e HTML do código original, para deixar mais simples, pois o importante era focar no JavaScript e mostrar a ideia geral do código.

0

Você está fazendo o caching dos valores dos inputs logo ao inicializar a página.

var num1 = parseFloat(document.getElementById("n1").value);
var num2 = parseFloat(document.getElementById("n2").value);

Como esse comando executa apenas uma vez ao inicializar, ele irá buscar os valores dos inputs (que são uma string fazia a esse ponto) e fazer o parse da string vazia (resultando em NaN). Variáveis do tipo string são valores, não referencias, então não importa o que o usuário digitar, esses valores não serão atualizados, eles sempre serão NaN

O que você deveria fazer é o seguinte:

// se for fazer caching, faça caching das referências
var num1 = document.getElementById("n1");
var num2 = document.getElementById("n2");
var resV = document.getElementById("result");
var opV = document.getElementById("op");

function calculate(op) {
    // também não há a necessidade de fazer parseFloat, se você irá
    // converter os números de volta para string
    opv.value = op.value;
    resV.value = eval(num1.value + op.value + num2.value);   
}
1
  • Valeu pela explicação! Funcionou!
    – GabrielB
    9/06/2020 às 15:46

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .