JS calculator: unexpected results

Asked

Viewed 839 times

10

I created a simple calculator in Javascript, but some results are going wrong, for example, operations like '10+10' (returns 18) or '20/2' (returns 8).
I’m still learning to mess with the language, so it may be that the error is very simple, but I can’t see anything in the code that causes it.

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>

javascript

1 answer

7


The problem is how to start the text that corresponds to the result calculation:

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

You are setting a zero at the beginning and when you add the rest to the front it will no longer be correct and the eval cannot give the desired result.

As @Andersoncarloswoss indicated in the comments the fact of having zero before does that in the calculation "10+10" stay in truth with "010+10" what is evaluated for 18 because how the first number is interpreted is octal. This interpretation is given because the number begins with 0, and 010 octal corresponds to 8 decimally, which when adding 10 gives the 18 which you indicated in the question.

Instead you should start the result with empty text:

var result = "";

See how it works only with this change:

<!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>

I do not know if the idea was to practice the use of arrays, because it is merely concatenating into a string to make eval it was much simpler to use just one string to do everything:

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>

  • 1

    It only remained to explain that with the zero left the JS interprets as octal, which explains the results 18 and 8, since 010 is 8 in decimal, getting 8+10 and 020 is 16, getting 16/2.

  • @Andersoncarloswoss Correct! Thank you for the comment.

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.