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>