Calculate Two Decimal Numbers | Javascript Calculator

Asked

Viewed 80 times

1

Hello, I’m making a calculator in javascript, but I’m having a little trouble doing an operation with two decimal numbers. The problem is that I cannot enter another decimal number after another see:

inserir a descrição da imagem aqui

I would like to add another decimal number right after the sign of the mathematical operations and stay like this : inserir a descrição da imagem aqui

Follows my code:

function calcular(tipo, valor) {

  //.           TIPOS              

  //. TIPO AÇÃO    
  if (tipo === 'acao') {

    //; AÇÃO DE VALOR C  (LIMPAR O VISOR)  
    if (valor === 'c') {
      document.getElementById('resultado').value = ''
    }

    //; AÇÕES DE VALOR  + | - | * | /  CONTATENAR  
    if (valor === '+' || valor === '-' || valor === '*' || valor === '/') {
      document.getElementById('resultado').value += valor
    }


    if (valor === '=') {
      var valorCampo = eval(document.getElementById('resultado').value)
      document.getElementById('resultado').value = valorCampo
    }



    if (valor === '.') {
      var conteudo = document.getElementById('resultado').value
      conteudo.includes('.') ? document.getElementById('resultado').value : document.getElementById('resultado').value += valor

    }



    if (valor === '\b') {
      document.getElementById('resultado').value = document.getElementById('resultado').value.substring(0, document.getElementById('resultado').value.length - 1)



    }








    //. TIPO VALOR    
  } else if (tipo === 'valor') {
    //; CONTATENAÇÃO DOS VALORES 
    document.getElementById('resultado').value += valor

  }




}
.calculadora {
  margin-top: 40px;
  border: solid 1px #000;
  padding: 20px;
  background-color: #2E2E2E;
  border-radius: 10px;
  box-shadow: 1px 1px 5px #000;
}

.btn {
  width: 60px;
  height: 50px;
  margin: 5px;
  box-shadow: 1px 1px 1px #000;
}

.clear {
  width: 60px;
}

.enter {
  height: 110px;
}

.zero {
  width: 130px;
}

.resultado {
  text-align: right;
  font-size: 20px;
  margin-top: 10px;
  margin-bottom: 20px;
  border: solid 1px #000;
  box-shadow: 1px 1px 1px #000;
}
<html>

<head>
  <title>Calculadora</title>

  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">

     <script src="https://kit.fontawesome.com/0c183dd402.js" crossorigin="anonymous"></script>



</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" class="form-control resultado" placeholder="0" disabled="disabled" />

          <div class="row">

            <button onclick="calcular('acao', '*')" type="button" class="btn btn-dark btn-lg font-weight-light">x</button>
            <button onclick="calcular('acao', '/')" type="button" class="btn btn-dark btn-lg font-weight-light">/</button>
            <button onclick="calcular('acao', 'c')" type="button" class="btn btn-dark btn-lg clear font-weight-light">C</button>
            <button onclick="calcular('acao', '\b')" type="button" class="btn btn-dark btn-lg font-weight-light"><i class="fas fa-backspace"></i></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('acao', '.')" type="button" class="btn btn-dark btn-lg font-weight-light">.</button>
          </div>

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

  
</body>

</html>

javascript

1 answer

1

You have created a condition to add the point to your calculator:

if (valor === '.') {
  var conteudo = document.getElementById('resultado').value
  conteudo.includes('.') ? document.getElementById('resultado').value : document.getElementById('resultado').value += valor
}

In this condition, you check if there is already any point in the value of the input, if it exists, nothing happens, if there is no point added to the input.

Instead of checking if there is already a point in your integer input, you could break the value of that input into an array, where each position contains one of the numerical values that is separated by an operator, and then check if there is already a point only in that last number:

var value = '99.666+336'
var values = value.split(/[^0-9.]/)
console.log(values)

Then just do your same if using this array.

Browser other questions tagged javascript

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