Tengo el siguiente problema que no consigo resolver.
Al realizar cualquier tipo de operacion sea suma, resta, multiplicacion etc.. si tecleo un numero este se sigue colocando en el input y yo no es lo que quiero.
Por ejemplo: Si hago 1+1 da 2 pero al volver a introducir otro número por ejemplo un 2 me sale 22.
Y yo no quiero este comportamiento, quiero que se limpie ese input. No tengo ningún otro problema que me haya percatado. Lo pongo así ya que no me deja publicarlo porque hay mayoritariamente código.
Gracias
Adjunto el código realizado hasta ahora:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="UTF-8">
<style type="text/css">
* {
margin: auto
}
div#contenedor {
display: flex;
width: 100%;
margin: auto;
height: 100vh;
align-items: center;
justify-content: center;
background-color: cyan
}
div#calculadora {
background-color: red;
width: 200px;
height: 175px;
display: inline-block;
padding: 10px;
}
input {
width: 45px;
}
</style>
</head>
<body>
<div id="contenedor">
<div id="calculadora">
<input type='text' id="texto" value="0" disabled style="width: 98%" ><br><br>
<input type="button" value="sqrt" onclick="raizCuadrada()">
<input type="button" value="C" onclick="limpiarUltimo()">
<input type="button" value="CA" onclick='limpiarTodo()'>
<input type="button" value="X" onclick="hacerOperacion(this.value)">
<input type="button" value="7" onclick="ponerDigito(this.value)">
<input type="button" value="8" onclick="ponerDigito(this.value)">
<input type="button" value='9' onclick="ponerDigito(this.value)">
<input type="button" value='/' onclick="hacerOperacion(this.value)">
<input type="button" value="4" onclick="ponerDigito(this.value)">
<input type="button" value="5" onclick="ponerDigito(this.value)">
<input type="button" value='6' onclick="ponerDigito(this.value)">
<input type="button" value='-' onclick="hacerOperacion(this.value)">
<input type="button" value="1" onclick="ponerDigito(this.value)">
<input type="button" value="2" onclick="ponerDigito(this.value)">
<input type="button" value='3' onclick="ponerDigito(this.value)">
<input type="button" value='+' onclick="hacerOperacion(this.value)">
<input type="button" value="0" onclick="ponerDigito(this.value)">
<input type="button" value="." onclick="ponerPunto(this.value)">
<input type="button" value='%' onclick="porcentaje()">
<input type="button" value='=' onclick="resultado()">
</div>
</div>
<script>
var num1 = 0;
var operacionPendiente = false;
function ponerDigito(valor) {
digitobase=document.getElementById('texto').value;
if(digitobase == '0' || operacionPendiente ) {
document.getElementById('texto').value = valor;
} else {
document.getElementById('texto').value = digitobase + valor;
}
}
function ponerPunto(valor) {
numeroCaracters = document.getElementById('texto').value.length;
texto = document.getElementById('texto').value;
i = 1;
while (texto.charAt(i) != "." && i<=numeroCaracters) {
i++;
}
if (texto.charAt(i) != ".") {
document.getElementById('texto').value = document.getElementById('texto').value + valor;
}
}
function limpiarTodo() {
document.getElementById('texto').value = '0';
}
function limpiarUltimo() {
numeroCaracters = document.getElementById('texto').value.length;
if (numeroCaracters == 1) {
document.getElementById('texto').value = '0';
} else {
document.getElementById('texto').value = document.getElementById('texto').value.substring(0,numeroCaracters-1);
}
}
function hacerOperacion(operador) {
num1 = parseFloat(document.getElementById('texto').value);
operacionPendiente = true;
operacion = operador;
}
function porcentaje(){
document.getElementById('texto').value = parseFloat(document.getElementById('texto').value) / 100;
}
function raizCuadrada() {
document.getElementById('texto').value = Math.sqrt(parseFloat(document.getElementById('texto').value));
}
function resultado() {
operacionPendiente = false;
switch(operacion) {
case 'X':
document.getElementById('texto').value = num1 * parseFloat(document.getElementById('texto').value);
break;
case '/':
if (document.getElementById('texto').value != '0') {
document.getElementById('texto').value = num1 / parseFloat(document.getElementById('texto').value);
} else { //Si se divide entre 0 da un Error
document.getElementById('texto').value = "Error"
}
break;
case '-':
document.getElementById('texto').value = num1 - parseFloat(document.getElementById('texto').value);
break;
case '+':
document.getElementById('texto').value = num1 + parseFloat(document.getElementById('texto').value);
break;
default:
}
}
</script>
</body>
</html>