estoy haciendo una calculadora similar a la que trae android en javascript, ya tiene todo el estilo y esta funcionando bien, pero no me deja hacer mas de un calculo matematico... Alguien que sepa mas de javascript que yo que me diga que estoy haciendo mal? Lo agradeceria mucho... Todo mi codigo se encuentra en este codepen.io: Enlace de codepen.io
Calculadora en pantalla completa: Click aqui
Por si acaso tambien lo agrego aqui:
var operandoa;
var operandob;
var operacion;
function init(){
//variables
var resultado = document.getElementById('resultado');
var reset = document.getElementById('reset');
var suma = document.getElementById('suma');
var resta = document.getElementById('resta');
var multiplicacion = document.getElementById('multiplicacion');
var division = document.getElementById('division');
var igual = document.getElementById('igual');
var uno = document.getElementById('uno');
var dos = document.getElementById('dos');
var tres = document.getElementById('tres');
var cuatro = document.getElementById('cuatro');
var cinco = document.getElementById('cinco');
var seis = document.getElementById('seis');
var siete = document.getElementById('siete');
var ocho = document.getElementById('ocho');
var nueve = document.getElementById('nueve');
var cero = document.getElementById('cero');
}
//Eventos de click
uno.onclick = function(e){
mioperacionaresolver.textContent = mioperacionaresolver.textContent + "1";
resultado.textContent = resultado.textContent + "1";
}
dos.onclick = function(e){
mioperacionaresolver.textContent = mioperacionaresolver.textContent + "2";
resultado.textContent = resultado.textContent + "2";
}
tres.onclick = function(e){
mioperacionaresolver.textContent = mioperacionaresolver.textContent + "3";
resultado.textContent = resultado.textContent + "3";
}
cuatro.onclick = function(e){
mioperacionaresolver.textContent = mioperacionaresolver.textContent + "4";
resultado.textContent = resultado.textContent + "4";
}
cinco.onclick = function(e){
mioperacionaresolver.textContent = mioperacionaresolver.textContent + "5";
resultado.textContent = resultado.textContent + "5";
}
seis.onclick = function(e){
mioperacionaresolver.textContent = mioperacionaresolver.textContent + "6";
resultado.textContent = resultado.textContent + "6";
}
siete.onclick = function(e){
mioperacionaresolver.textContent = mioperacionaresolver.textContent + "7";
resultado.textContent = resultado.textContent + "7";
}
ocho.onclick = function(e){
mioperacionaresolver.textContent = mioperacionaresolver.textContent + "8";
resultado.textContent = resultado.textContent + "8";
}
nueve.onclick = function(e){
mioperacionaresolver.textContent = mioperacionaresolver.textContent + "9";
resultado.textContent = resultado.textContent + "9";
}
cero.onclick = function(e){
mioperacionaresolver.textContent = mioperacionaresolver.textContent + "0";
resultado.textContent = resultado.textContent + "0";
}
reset.onclick = function(e){
resetear();
}
suma.onclick = function(e){
mioperacionaresolver.textContent = mioperacionaresolver.textContent + "+";
operandoa = resultado.textContent;
operacion = "+";
limpiar();
}
resta.onclick = function(e){
mioperacionaresolver.textContent = mioperacionaresolver.textContent + "-";
operandoa = resultado.textContent;
operacion = "-";
limpiar();
}
multiplicacion.onclick = function(e){
mioperacionaresolver.textContent = mioperacionaresolver.textContent + "×";
operandoa = resultado.textContent;
operacion = "*";
limpiar();
}
division.onclick = function(e){
mioperacionaresolver.textContent = mioperacionaresolver.textContent + "÷";
operandoa = resultado.textContent;
operacion = "/";
limpiar();
}
igual.onclick = function(e){
operandob = resultado.textContent;
resolver();
}
function limpiar(){
resultado.textContent = "";
}
function resetear(){
mioperacionaresolver.textContent = "";
resultado2.textContent = "";
resultado.textContent = ""
operandoa = 0;
operandob = 0;
operacion = "";
}
function resolver(){
var res = 0;
switch(operacion){
case "+":
res = parseFloat(operandoa) + parseFloat(operandob);
break;
case "-":
res = parseFloat(operandoa) - parseFloat(operandob);
break;
case "*":
res = parseFloat(operandoa) * parseFloat(operandob);
break;
case "/":
res = parseFloat(operandoa) / parseFloat(operandob);
break;
}
resultado2.textContent = res;
}
* {
margin:0;
padding:0;
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently
supported by Chrome and Opera */
}
html {
height:100%;
width:100%;
}
body {
height:100%;
width:100%;
background-color: #3C4043
}
.contenedor-primario {
width: 35%;
height: 100%;
float: left;
background-color: black;
}
.contenedor-principal {
width: 30%;
height: 100%;
float: left;
}
.contenedor-secundario {
width: 35%;
height: 100%;
float: left;
background-color: black;
}
@media (max-width: 767.98px) {
.contenedor-primario {
display: none;
}
.contenedor-secundario {
display: none;
}
.contenedor-principal {
width: 100%;
}
}
.contenedor {
height: 40%;
width: 100%;
position: relative;
background-color: white;
}
.contenedor2 {
height: 60%;
width: 78%!important;
position: relative;
background-color: #3C4043;
float: left;
}
.contenedor3 {
height: 60%;
width: 22%!important;
position: relative;
background-color: #5D6166;
float: left;
}
.col {
background-color: #3C4043;
cursor: pointer;
}
.col h1 {
text-align: center;
position: relative;
top: 50%;
-ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
color:white;
font-family:Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
}
.col-background:active {
background-color: #606466;
-moz-border-radius: 700px;
-webkit-border-radius: 700px;
border-radius: 700px;
-webkit-transition: background-color 10ms linear;
-moz-transition: background-color 10ms linear;
-o-transition: background-color 10ms linear;
-ms-transition: background-color 10ms linear;
transition: background-color 10ms linear;
}
.grisclaro {
background-color: #5D6166;
}
.grisclaro2 {
background-color: #5D6166;
width: 100%;
height: 100%;
}
.grisclaro2:active {
background-color: #7D8084;
-moz-border-radius: 700px;
-webkit-border-radius: 700px;
border-radius: 700px;
-webkit-transition: background-color 10ms linear;
-moz-transition: background-color 10ms linear;
-o-transition: background-color 10ms linear;
-ms-transition: background-color 10ms linear;
transition: background-color 10ms linear;
}
.colgris {
background-color: #5D6166;
}
.col {
padding-left: 0!important;
padding-right: 0!important;
}
.num {
height: 25%;
}
.num2 {
height: 20%;
}
.resultado {
text-align: right;
position: relative;
color:#5D6166;
top: 30%;
font-size: 40px;
}
.operacion {
text-align: right;
position: relative;
color:black;
top: 20%;
font-size: 60px;
}
.operacionesinvisibles {
display:none;
}
.resultado2 {
width: 100%;
height: 100%;
color:white!important;
}
.resultado2 .col {
background-color: white!important;
}
.resultado2 .col h1 {
color:black;
}
.operaciones {
cursor:auto;
}
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<link rel="stylesheet" href="calc.css">
<title>Calculadora</title>
</head>
<body onload="init();">
<div class="contenedor-primario"></div>
<div class="contenedor-principal">
<div class="container-fluid contenedor">
<div class="row resultado2">
<div class="col operaciones">
<h2 class="operacion"><span id="mioperacionaresolver"></span></h2>
<h2 class="operacion operacionesinvisibles"><span id="resultado"></span></h2>
<h2 class="resultado"><span id="resultado2"></span></h2>
</div>
</div>
</div>
<div class="container-fluid contenedor2">
<div class="row num">
<div class="col col-background" id="siete"><h1>7</h1></div>
<div class="col col-background" id="ocho"><h1>8</h1></div>
<div class="col col-background" id="nueve"><h1>9</h1></div>
</div>
<div class="row num">
<div class="col col-background" id="cuatro"><h1>4</h1></div>
<div class="col col-background" id="cinco"><h1>5</h1></div>
<div class="col col-background" id="seis"><h1>6</h1></div>
</div>
<div class="row num">
<div class="col col-background" id="uno"><h1>1</h1></div>
<div class="col col-background" id="dos"><h1>2</h1></div>
<div class="col col-background" id="tres"><h1>3</h1></div>
</div>
<div class="row num">
<div class="col col-background" id="borrar"><h1>C</h1></div>
<div class="col col-background" id="cero"><h1>0</h1></div>
<div class="col col-background" id="igual"><h1>=</h1></div>
</div>
</div>
<div class="container-fluid contenedor3">
<div class="row num num2">
<div class="col colgris" id="reset"><div class="grisclaro2"><h1>CE</h1></div></div>
</div>
<div class="row num num2">
<div class="col colgris" id="division"><div class="grisclaro2"><h1>÷</h1></div></div>
</div>
<div class="row num num2">
<div class="col colgris" id="multiplicacion"><div class="grisclaro2"><h1>×</h1></div></div>
</div>
<div class="row num num2">
<div class="col colgris" id="resta"><div class="grisclaro2"><h1>-</h1></div></div>
</div>
<div class="row num num2">
<div class="col colgris" id="suma"><div class="grisclaro2"><h1>+</h1></div></div>
</div>
</div>
</div>
<div class="contenedor-secundario"></div>
<script src="calc2.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
</body>
</html>
Pero al querer hacer 256*2/2 me da 1, osea solamente toma la ultima operacion, como puedo modificar esto?
Yo creo que deberia tomar el primer resultado 256*2, resolverlo y luego hacer resultado/2, osea 512*2, alguna idea de como podria hacerlo?