10

Criei uma calculadora simples em JavaScript, porém alguns resultados estão dando errado, por exemplo, as operações como '10+10' (retorna 18) ou '20/2' (retorna 8).
Estou aprendendo ainda a mexer com a linguagem, então pode ser que o erro seja bem simples, mas não consigo ver nada no código que cause isso.

var array = [];

// acionado ao clicar em números ou operadores
// inclui os todos numeros e operadores a um array
// exibe no paragrafo de id 'txt' o número ou operador que foi pressionado por ultimo
function funcao(param) {
  var txt = document.getElementById('txt');
  array.push(param);
  txt.innerHTML = (param);
}

// acionado ao clicar na opção =
// passa todos os itens do array para uma variavel e depois usa 'eval()' para calcular a operação
// exibe o resultado no paragrafo de id 'txt'
function resultado() {
  var result = 0;
  for (var i = 0; i < array.length; i++) {
    result += array[i];
  }
  result = eval(result);
  txt.innerHTML = (result);
}

// acionado ao clicar na opção C
// remove todos os itens do array
// passa o valor da variavel result para zero
// volta a exibir apenas um espaço no paragrafo de id 'txt'
function limpar() {
  for (var c = 1; c < array.length; c++) {
    array = array.splice();
  }
  result = 0;
  txt.innerHTML = " ";
}
#tela {
  border: 1px solid #000;
  width: 200px;
  padding: 10px;
  text-align: right;
  margin-bottom: 5px;
}

button {
  border: none;
  margin: 2px;
  padding: 10px;
  width: 49px;
  height: 50px;
}
<!-- dentro do paragrafo foi adicionado um espaço em branco por questões visuais (alt+255) -->
<div id='tela'>
  <p id='txt'> </p>
</div>

<!-- cada botao chama a função funcao() com o seu valor, sendo números ou operadores -->
<button onclick="funcao('1')">1</button>
<button onclick="funcao('2')">2</button>
<button onclick="funcao('3')">3</button>
<button onclick="funcao('+')">+</button><br>

<button onclick="funcao('4')">4</button>
<button onclick="funcao('5')">5</button>
<button onclick="funcao('6')">6</button>
<button onclick="funcao('-')">-</button><br>

<button onclick="funcao('7')">7</button>
<button onclick="funcao('8')">8</button>
<button onclick="funcao('9')">9</button>
<button onclick="funcao('*')">*</button><br>

<!-- as funções limpar() e resultado() são para zerar a calculadora e mostrar o resultado, respectivamente-->
<button onclick="limpar()">c</button>
<button onclick="funcao('0')">0</button>
<button onclick="resultado()">=</button>
<button onclick="funcao('/')">/</button>

1 Resposta 1

7

O problema está na forma como inicia o texto que corresponde ao calculo do resultado:

function resultado() {
    var result = 0; //<--aqui
    for (var i=0;i<array.length;i++) {
        result += array[i];
    }
    result = eval(result);
    txt.innerHTML = (result);
}

Está a colocar um zero no inicio e quando adiciona o resto à frente já não irá estar correto e o eval não consegue dar o resultado pretendido.

Como o @AndersonCarlosWoss indicou nos comentários o facto de ter o zero antes faz que no calculo "10+10" fique na verdade com "010+10" o que é avaliado para 18 porque o como o primeiro numero é interpretado como octal. Esta interpretação dá-se porque o número começa com 0, e 010 em octal corresponde a 8 em decimal, que quando adiciona 10 dá o 18 que indicou na pergunta.

Em vez disso deve iniciar o resultado com texto vazio:

var result = "";

Veja como funciona só com essa alteração:

<!DOCTYPE html>
<html lang="pt-br">
<head>

    <title>Calculadora</title>

    <meta charset="utf-8">
    <style type="text/css">
        #tela {
            border: 1px solid #000;
            width:200px;
            padding:10px;
            text-align:right;
            margin-bottom:5px;
        }

        button {
            border:none;
            margin:2px;
            padding:10px;
            width:49px;
            height:50px;
        }
    </style>
</head>
<body>
    <!-- dentro do paragrafo foi adicionado um espaço em branco por questões visuais (alt+255) -->
    <div id='tela'><p id='txt'> </p></div>

    <!-- cada botao chama a função funcao() com o seu valor, sendo números ou operadores -->
    <button onclick="funcao('1')">1</button>
    <button onclick="funcao('2')">2</button>
    <button onclick="funcao('3')">3</button>
    <button onclick="funcao('+')">+</button><br>

    <button onclick="funcao('4')">4</button>
    <button onclick="funcao('5')">5</button>
    <button onclick="funcao('6')">6</button>
    <button onclick="funcao('-')">-</button><br>

    <button onclick="funcao('7')">7</button>
    <button onclick="funcao('8')">8</button>
    <button onclick="funcao('9')">9</button>
    <button onclick="funcao('*')">*</button><br>

    <!-- as funções limpar() e resultado() são para zerar a calculadora e mostrar o resultado, respectivamente-->
    <button onclick="limpar()">c</button>
    <button onclick="funcao('0')">0</button>
    <button onclick="resultado()">=</button>
    <button onclick="funcao('/')">/</button>

    <script type="text/javascript">
        var array = [];

        // acionado ao clicar em números ou operadores
        // inclui os todos numeros e operadores a um array
        // exibe no paragrafo de id 'txt' o número ou operador que foi pressionado por ultimo
        function funcao(param) {
            var txt = document.getElementById('txt');
            array.push(param);
            //console.log(array);
            txt.innerHTML = (param);
        }

        // acionado ao clicar na opção =
        // passa todos os itens do array para uma variavel e depois usa 'eval()' para calcular a operação
        // exibe o resultado no paragrafo de id 'txt'
        function resultado() {
            var result = "";
            for (var i=0;i<array.length;i++) {
                result += array[i];
            }
            result = eval(result);
            txt.innerHTML = (result);
        }

        // acionado ao clicar na opção C
        // remove todos os itens do array
        // passa o valor da variavel result para zero
        // volta a exibir apenas um espaço no paragrafo de id 'txt'
        function limpar() {
            for(var c = 1; c<array.length; c++) {
                array=array.splice();
            }
            result = 0;
            txt.innerHTML = " ";
        }
    </script>
</body>

Não sei se a ideia era praticar o uso de arrays, porque se está meramente a concatenar numa string para fazer eval era muito mais simples usar apenas uma string para fazer tudo:

let calculo = "";
const txt = document.getElementById('txt');

function funcao(param) {
    txt.innerHTML = param;
    calculo += param;
}

function resultado() {
    txt.innerHTML = eval(calculo);
}

function limpar() {
    calculo = "";
    txt.innerHTML = " ";
}
<!DOCTYPE html>
<html lang="pt-br">
<head>

    <title>Calculadora</title>

    <meta charset="utf-8">
    <style type="text/css">
        #tela {
            border: 1px solid #000;
            width:200px;
            padding:10px;
            text-align:right;
            margin-bottom:5px;
        }

        button {
            border:none;
            margin:2px;
            padding:10px;
            width:49px;
            height:50px;
        }
    </style>
</head>
<body>
    <!-- dentro do paragrafo foi adicionado um espaço em branco por questões visuais (alt+255) -->
    <div id='tela'><p id='txt'> </p></div>

    <!-- cada botao chama a função funcao() com o seu valor, sendo números ou operadores -->
    <button onclick="funcao('1')">1</button>
    <button onclick="funcao('2')">2</button>
    <button onclick="funcao('3')">3</button>
    <button onclick="funcao('+')">+</button><br>

    <button onclick="funcao('4')">4</button>
    <button onclick="funcao('5')">5</button>
    <button onclick="funcao('6')">6</button>
    <button onclick="funcao('-')">-</button><br>

    <button onclick="funcao('7')">7</button>
    <button onclick="funcao('8')">8</button>
    <button onclick="funcao('9')">9</button>
    <button onclick="funcao('*')">*</button><br>

    <!-- as funções limpar() e resultado() são para zerar a calculadora e mostrar o resultado, respectivamente-->
    <button onclick="limpar()">c</button>
    <button onclick="funcao('0')">0</button>
    <button onclick="resultado()">=</button>
    <button onclick="funcao('/')">/</button>
</body>

2
  • 1
    Só faltou explicar que com o zero a esquerda o JS interpreta como octal, o que explica os resultados 18 e 8, visto que 010 é 8 em decimal, ficando 8+10 e 020 é 16, ficando 16/2.
    – Woss
    18/12/2017 às 1:26
  • @AndersonCarlosWoss Correto! Agradeço o comentario.
    – Isac
    18/12/2017 às 1:34

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 .