Javascript controlar botao operacao calculadora

WilliamNascimento · 7 de setembro de 2020

Eu estava tentando controlar minha calculadora para quando clicar no botao de operacao e ele ja estiver cliclado anteriormente ele nao sobrepor

por exemplo 5++++5. Estava tentando por um alert para saber uma logica , tentei criar uma variavel no topo da funcao e quando clicasse nos numeros ela recebia o valor true , e quando fosse clicado na operacao ela recebia false , e ai botei botei tipo if (tipo === valor && sinal === true ) entrava no bloco de sinal , porém nao consegui .

Alguem pode me dar uma dica para que eu possa fazer ?

function calcular (tipo , valor)
  {
      if (tipo === 'acao')
    {
      if (valor === 'c')
      {
        document.getElementById('resultado').value = ""
      }
      if(valor  === '+' || valor  === '-' || valor  === '*' || valor  === '+' || valor  === '/')
        document.getElementById('resultado').value+=valor
      sinal = 1
    }
  
   else if (tipo === 'valor'){
          document.getElementById('resultado').value+=valor
    }

  }

  <body style="background: #D9D9D9">

    <div class="container">
      <div class="row">
        <div class="col d-flex justify-content-center">
          <br />

          <div class="calculadora">
            <input id = "resultado" type="text" class="form-control resultado" placeholder="0" disabled="disabled" />
            
            <div class="row">
              <button onclick = "calcular('acao','c')" type="button" class="btn btn-dark btn-lg clear font-weight-light">C</button>
              <button onclick = "calcular('acao','/')" onfocus="verificar()" type="button" class="btn btn-dark btn-lg font-weight-light">/</button>
              <button  onclick = "calcular('acao','*')"type="button" class="btn btn-dark btn-lg font-weight-light">x</button>
            </div>

            <div class="row">
              <button onclick = "calcular('valor' , 7)" type="button" class="btn btn-dark btn-lg font-weight-light">7</button>
              <button onclick = "calcular('valor',8)" type="button" class="btn btn-dark btn-lg font-weight-light">8</button>
              <button onclick = "calcular('valor',9)" type="button" class="btn btn-dark btn-lg font-weight-light">9</button>
              <button onclick = "calcular('acao', '-')" type="button" class="btn btn-dark btn-lg font-weight-light">-</button>
            </div>
            
            <div class="row">
              <button onclick = "calcular('valor',4)" type="button" class="btn btn-dark btn-lg font-weight-light">4</button>
              <button onclick = "calcular('valor',5)" type="button" class="btn btn-dark btn-lg font-weight-light">5</button>
              <button onclick = "calcular('valor',6)" type="button" class="btn btn-dark btn-lg font-weight-light">6</button>
              <button onclick = "calcular('acao', '+')" type="button" class="btn btn-dark btn-lg font-weight-light">+</button>
            </div>

            <div class="row">
              <button onclick = "calcular('valor',1)" type="button" class="btn btn-dark btn-lg font-weight-light">1</button>
              <button onclick = "calcular('valor',2)" type="button" class="btn btn-dark btn-lg font-weight-light">2</button>
              <button onclick = "calcular('valor',3)" type="button" class="btn btn-dark btn-lg font-weight-light">3</button>
              <button onclick = "calcular('acao', '=')"  type="button" class="btn btn-dark btn-lg enter">=</button>
            </div>

            <div class="row" style="margin-top: -60px">
              <button onclick = "calcular('valor',0)" type="button" class="btn btn-dark zero btn-lg font-weight-light">0</button>
              <button onclick = "calcular('valor','.')" type="button" class="btn btn-dark btn-lg font-weight-light">.</button>
            </div>

          </div>
        </div>
      </div>
    </div>    
  </body>

Segue o html e o js

Marcelo Calazans · 7 de setembro de 2020

Na minha opinião, se você usa a variável tipo para diferenciar operação('acao') de valor('valor'), você não precisaria dentro da função, fazer um if para ver se é (* / - +), porque se for ('acao'), obviamente já será (* / - +).

Não sei que erro está dando, mas pense na lógica de uma maneira mais simples.

Lembre-se que pode acontecer por exemplo (5.....5), que seria ruim também.

Eu criaria dois outros tipos:

"calcular('limpar','c')"

"calcular('ponto','.')"

Assim eu acho que ficaria mais fácil de fazer a consistência com a variável sinal dentro da função.

Sua ideia é boa, se desenvolver bem acho que funciona.

Boa sorte.

DavidTadeufreitas · 7 de setembro de 2020

Oi amigo, tudo bom? Eu vi seu código e acredito que dá pra fazer algumas melhorias nele. Eu teria abordado algumas coisas de maneira diferente. Para poupar código, mas busquei respeitar ai a sua lógica, sem mexer muito na forma que você deu para resolver este caso.

Ainda faltam tratar algumas coisas, não tratei tudo para você, pois imagino que su objetivo esteja sendo praticar dada a simplicidade do projeto.

Vamos ao que eu fiz com o JS:

Reduzi a quantidade de parâmetros usando um método nativo do JS chamado isNaN
Reduzi o objeto "#resultado" a uma variável. Melhora a leitura
Declarei algumas variáveis para trabalhar e tratar algumas situações
1. resultadoVal = retorna o valor do input
2. lastValue = retorna o último valor do input
  1. Para tratar a concatenação de números com números
  2. Separar números de operadores
  3. Identificar quando for um ponto ao lado de um operador ou número
3. lastIsOperator= retorna se o último char é operador ou não.

  function calcResultadoVal(valor) {
    resultado.value = valor;
}

function calcular(valor) {
    let resultado = document.querySelector("#resultado");
    let resultadoVal = resultado.value;
    let lastValue = resultadoVal[(resultadoVal.length - 1)];
    let lastIsOperator = isNaN(lastValue);


    if (isNaN(valor)) {

        switch (valor) {

            case 'c':
                calcResultadoVal("0");
                break;
            case '.':
                if (lastIsOperator) {
                    calcResultadoVal(`${resultadoVal} 0${valor}`);
                } else {
                    calcResultadoVal(`${resultadoVal} ${valor}`);
                }


                break;

            default:

                if (lastIsOperator) {
                    calcResultadoVal(`${resultadoVal.substr(0,resultadoVal.length - 1)}${valor}`);
                } else
                    calcResultadoVal(`${resultadoVal} ${valor}`);
        }

    } else {


        if (lastIsOperator) {
            if (lastValue == ".") {

                calcResultadoVal(`${resultadoVal}${valor}`);
            } else {
                calcResultadoVal(`${resultadoVal} ${valor}`);
            }
        } else {
            calcResultadoVal(`${resultadoVal}${valor}`);
        }
    }
}

Html

Tirei a passagem do parâmetro tipo. Eu não teria feito dessa forma individualizada. Lhe aconselho a estudar um pouco sobre eventos em javascript. Seu código pode ser bem aprimorado ainda, para isso basta que você olhe pra ele como um sistema e não como uma calculadora simples. Trate tudo como grande, que possa um dia passar por uma refatoração. Mesmo que seja simples. É só dica

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
  <body style="background: #D9D9D9">

    <div class="container">
      <div class="row">
        <div class="col d-flex justify-content-center">
          <br />

          <div class="calculadora">
            <input id = "resultado" type="text" value="0" class="form-control resultado" placeholder="0" disabled="disabled" />
            
            <div class="row">
              <button onclick = "calcular('c')" type="button" class="btn btn-dark btn-lg clear font-weight-light">C</button>
              <button onclick = "calcular('/')" onfocus="verificar()" type="button" class="btn btn-dark btn-lg font-weight-light">/</button>
              <button  onclick = "calcular('*')"type="button" class="btn btn-dark btn-lg font-weight-light">x</button>
            </div>

            <div class="row">
              <button onclick = "calcular(, 7)" type="button" class="btn btn-dark btn-lg font-weight-light">7</button>
              <button onclick = "calcular(8)" type="button" class="btn btn-dark btn-lg font-weight-light">8</button>
              <button onclick = "calcular(9)" type="button" class="btn btn-dark btn-lg font-weight-light">9</button>
              <button onclick = "calcular('-')" type="button" class="btn btn-dark btn-lg font-weight-light">-</button>
            </div>
            
            <div class="row">
              <button onclick = "calcular(4)" type="button" class="btn btn-dark btn-lg font-weight-light">4</button>
              <button onclick = "calcular(5)" type="button" class="btn btn-dark btn-lg font-weight-light">5</button>
              <button onclick = "calcular(6)" type="button" class="btn btn-dark btn-lg font-weight-light">6</button>
              <button onclick = "calcular('+')" type="button" class="btn btn-dark btn-lg font-weight-light">+</button>
            </div>

            <div class="row">
              <button onclick = "calcular(1)" type="button" class="btn btn-dark btn-lg font-weight-light">1</button>
              <button onclick = "calcular(2)" type="button" class="btn btn-dark btn-lg font-weight-light">2</button>
              <button onclick = "calcular(3)" type="button" class="btn btn-dark btn-lg font-weight-light">3</button>
              <button onclick = "calcular('=')"  type="button" class="btn btn-dark btn-lg enter">=</button>
            </div>

            <div class="row" style="margin-top: -60px">
              <button onclick = "calcular(0)" type="button" class="btn btn-dark zero btn-lg font-weight-light">0</button>
              <button onclick = "calcular('.')" type="button" class="btn btn-dark btn-lg font-weight-light">.</button>
            </div>

          </div>
        </div>
      </div>
    </div>    
  </body>
<script type="text/javascript" src="calculadora.js"></script>
  </html>