0

Estoy creando una calculadora, pero ya logré que muestre el texto en el input, pero no me lo calcula, no se a que se debe el conflicto ya que no me arroja ningún error, ya que cuando le doy al botón "=", se suma al texto y no me hace el cálculo del texto ingresado. He intentando averiguar como hacer el cálculo pero no encuentro solución al problema, ya que mis sospechas es con el método value, pero no se porque me crea ese conflicto con ese método. Estoy comenzando con el aprendizaje en frontend, realmente soy principiante :,) de ante mano gracias y buenas noches.

"use strict";
let equal_pressed = 0;
let button_input = document.querySelectorAll('.input-button');
let input = document.getElementById('input');
let equal = document.getElementById('equal');
let clear = document.getElementById('clear');
let erase = document.getElementById('erase');

window.onload = () => {
  input.value= 0;
};

button_input.forEach((button_class) => {
  button_class.addEventListener('click', () =>{
    if (equal_pressed == 1) {
      input.value = 0;
      equal_pressed = 0;
    }

    input.value += button_class.value;
  });
});

equal.addEventListener('click', () =>{
 equal_pressed = 1;
 let inp_val = input.value;
 try{
   let solution = eval(inp_val);
   if(Number.isInteger(solution)){
     input.value = solution;
   }else{
     input.value = solution.toFixed(2);
   }
 }catch(err){}
});
body {
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.row {
  height: 60px;
}
.col-3,
.col-6 {
  display: flex;
  align-items: center;
  justify-content: center;
  stroke-linecap: round;
  border-radius: 10%;
}

.col-3:hover,
.col-6:hover {
  background-color: rgba(30, 128, 153, 0.644);
  color: white;
}
.col-3:active,
.col-6:active {
  background-color: rgba(30, 128, 153, 0.644);
  color: white;
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous"
    />
    <script
      src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
      crossorigin="anonymous"
    ></script>
    <link rel="stylesheet" href="/css/styles.css" />
    <title>Document</title>
  </head>
  <body>
    <div class="container shadow-lg p-3 mb-5 bg-body rounded" id="window">
      <input type="text" placeholder="0" id="input" class="form-control mt-3" disabled/>
      <div class="row mt-3">
        <div class="col-3">
          <input type="button" value="C" class="input-button" id="clear">
        </div>
        <div class="col-3">
          <input type="button" value="/" class="input-button">
        </div>
        <div class="col-3">
          <input type="button" value="*" class="input-button">
        </div>
        <div class="col-3">
          <input type="button" value="DEL" class="input-button" id="erase">
        </div>
      </div>
      <div class="row">
        <div class="col-3">
          <input type="button" value="7" class="input-button">
        </div>
        <div class="col-3">
          <input type="button" value="8" class="input-button">
        </div>
        <div class="col-3">
          <input type="button" value="9" class="input-button">
          </button>
        </div>
        <div class="col-3">
          <input type="button" value="+" class="input-button">
        </div>
      </div>
      <div class="row">
        <div class="col-3">
          <input type="button" value="4" class="input-button">
        </div>
        <div class="col-3">
          <input type="button" value="5" class="input-button">
        </div>
        <div class="col-3">
          <input type="button" value="6" class="input-button">
        </div>
        <div class="col-3">
          <input type="button" value="-" class="input-button">
        </div>
      </div>
      <div class="row">
        <div class="col-3">
          <input type="button" value="1" class="input-button">
        </div>
        <div class="col-3">
          <input type="button" value="2" class="input-button">
        </div>
        <div class="col-3">
          <input type="button" value="3" class="input-button">
        </div>
        <div class="col-3">
          <input type="button" value="%" class="input-button">
        </div>
      </div>
      <div class="row">
        <div class="col-6">
          <input type="button" value="0" class="input-button">
        </div>
        <div class="col-3">
          <input type="button" value="." class="input-button">
        </div>
        <div class="col-3">
          <input type="button" value="=" class="input-button" id="equal">
        </div>
      </div>
    </div>
    <script src="script.js"></script>
  </body>
</html>

1
  • Deberias utilizar tipo number en vez de texto. Sino debes convertir los values a enteros o mejor aun flotantes si es una calculadora Commented el 26 mar. 2022 a las 10:20

1 respuesta 1

0

La razón por la cual no se están realizando las operaciones matemáticas en tu código es porque los valores del input están en formato texto (mejor conocido como string). Y aunque cambiases cada numero tipo string a tipo numérico de igual forma no se efectuaría la operación porque los operadores matemáticos (%, *, /, +, -, %) también están en formato de texto. Afortunadamente en JavaScript existe el método eval()

La función eval() toma un texto y lo ejecuta como una función matemática, retornando su resultado.

let input = document.querySelector('#inputCalc')

// con el evento oninput la suma se realiza cada vez que el usuario escribe pero tu lo puedes hacer con el evento que quieras
input.oninput = e => console.log(eval(input.value))
<input type="text" id="inputCalc">

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.