It turns out that I want to try to have the last number erased I've written but I can not think of how. Something like the backspace that computers have, that's why the arrow between AC and the percentage.
var primern;
var segundon;
var resultado2;
function init(){
//tuve que cambiar la forma de declarar las variables porque buscando lei que
//el getElementsClassName es para grupo de vaiables y yo solo tenia una y lo cambie por Id
var pantalla = document.getElementById('pantalla');
var reset = document.getElementById('reset');
var backspace = document.getElementById('backspace');
var porcentaje = document.getElementById('porcentaje');
var divicion = document.getElementById('divicion');
var multiplicacion = document.getElementById('multiplicacion');
var resta = document.getElementById('resta');
var suma = document.getElementById('suma');
var igual = document.getElementById('igual');
var numero1 = document.getElementById('numero1');
var numero2 = document.getElementById('numero2');
var numero3 = document.getElementById('numero3');
var numero4 = document.getElementById('numero4');
var numero5 = document.getElementById('numero5');
var numero6 = document.getElementById('numero6');
var numero7 = document.getElementById('numero7');
var numero8 = document.getElementById('numero8');
var numero9 = document.getElementById('numero9');
var cero = document.getElementById('cero');
var decimal = document.getElementById('decimal');
numero1.onclick = function(e){
pantalla.value = pantalla.value + "1";
}
numero2.onclick = function(e){
pantalla.value = pantalla.value + "2";
}
numero3.onclick = function(e){
pantalla.value = pantalla.value + "3";
}
numero4.onclick = function(e){
pantalla.value = pantalla.value + "4";
}
numero5.onclick = function(e){
pantalla.value = pantalla.value + "5";
}
numero6.onclick = function(e){
pantalla.value = pantalla.value + "6";
}
numero7.onclick = function(e){
pantalla.value = pantalla.value + "7";
}
numero8.onclick = function(e){
pantalla.value = pantalla.value + "8";
}
numero9.onclick = function(e){
pantalla.value = pantalla.value + "9";
}
cero.onclick = function(e){
pantalla.value = pantalla.value + "0";
}
decimal.onclick = function(e){
pantalla.value = pantalla.value + ".";
}
reset.onclick = function(e){
recetear();
}
suma.onclick = function(e){
primern = pantalla.value;
resultado2 = "+";
limpiar();
}
resta.onclick = function(e){
primern = pantalla.value;
resultado2 = "-";
limpiar();
}
multiplicacion.onclick = function(e){
primern = pantalla.value;
resultado2 = "*";
limpiar();
}
divicion.onclick = function(e){
primern = pantalla.value;
resultado2 = "/";
limpiar();
}
igual.onclick = function(e){
segundon = pantalla.value;
resolver();
}
porcentaje.onclick = function(e){
primern = pantalla.value;
resultado2 = "%";
resolver();
}
}
function limpiar (){
pantalla.value = "";
}
function recetear(){
pantalla.value = "";
primern = 0;
segundon = 0;
resultado2 = "";
}
//esto lo vi en java, tuve que buscar en mi ordenador donde tenia un ejercicio parecido que tenia.
function resolver(){
var res = 0;
switch(resultado2){
case "+":
res = parseFloat(primern) + parseFloat(segundon);
break;
case "-":
res = parseFloat(primern) - parseFloat(segundon);
break
case "*":
res = parseFloat(primern) * parseFloat(segundon);
break
case "/":
res = parseFloat(primern) / parseFloat(segundon);
break
case "%":
res = parseFloat(primern) / 100;
break
}
recetear();
pantalla.value = res;
}*{
margin:0px;
padding:0px;
}
.contenedor{
}
.resultado{
font-size:30px;
font-family: Arial,Helvetica;
color:white;
border:0px;
background:black;
width:325.8px;
height:80px;
text-align:right;
}
.columna1{
font-size:30px;
font-family: Arial,Helvetica;
color:black;
border:0px;
background:#D6CFC9;
width:80px;
height:80px;
}
.columna2{
font-size:30px;
font-family: Arial,Helvetica;
color:white;
border:0px;
background:#FF821C;
width:80px;
height:80px;
}
#cero{
width:162px;
}
.fila{
font-size:30px;
font-family: Arial,Helvetica;
color:black;
border:0px;
background:#C9BDB3;
width:80px;
height:80px;
}
table{
background:#7E7E7D;
}
td input:active{
background:#fff;
}<!DOCTYPE html>
<html>
<head>
<title>Calculadora</title>
</head>
<link rel="stylesheet" type="text/css" href="css/estilos.css">
<body onload="init();">
<div class="contenedor">
<form>
<table>
<tr>
<td colspan="4"><input class="resultado" id="pantalla" type="text" value=""></td>
</tr>
<tr>
<td><input class="fila" id="reset" type="button" value="AC"></td>
<td><input class="fila" id="backspace" type="button" value="←"></td>
<td><input class="fila" id="porcentaje" type="button" value="%"></td>
<td><input class="columna2" id="divicion" type="button" value="÷"></td>
</tr>
<tr>
<td><input class="columna1" id="numero7" type="button" value="7"></td>
<td><input class="columna1" id="numero8" type="button" value="8"></td>
<td><input class="columna1" id="numero9" type="button" value="9"></td>
<td><input class="columna2" id="multiplicacion" type="button" value="x"></td>
</tr>
<tr>
<td><input class="columna1" id="numero4" type="button" value="4"></td>
<td><input class="columna1" id="numero5" type="button" value="5"></td>
<td><input class="columna1" id="numero6" type="button" value="6"></td>
<td><input class="columna2" id="resta" type="button" value="-"></td>
</tr>
<tr>
<td><input class="columna1" id="numero1" type="button" value="1"></td>
<td><input class="columna1" id="numero2" type="button" value="2"></td>
<td><input class="columna1" id="numero3" type="button" value="3"></td>
<td><input class="columna2" id="suma" type="button" value="+"></td>
</tr>
<tr>
<td colspan="2"><input class="columna1" id="cero" type="button" value="0"></td>
<td><input class="columna1" id="decimal" type="button" value="."></td>
<td><input class="columna2" id="igual" type="button" value="="></td>
</tr>
</table>
</form>
<script language="javascript" type="text/javascript" src="js/Calculadora.js"></script>
</div>
</body>
</html>