Solo faltaria modificar el javascript para que me funcione correctamente y el simbolo "+" se tendria que ir cambiando cada vez que teclamos un simbolo.(Resuelto)
Bueno, ahora lo que me pasa fue al modificarlo, no me sale la ventana de ERROR que puse en el "if" de la operacion de division.(Sin Resolver)
// Modelo de Datos
var operandoa = '';
var operandob = '';
var operacion = '+';
var operadorPulsado = false;
// Vista
var resultado = document.getElementById("resultado");
var campoOperandoA = document.getElementById("OperA");
var campoOperandoB = document.getElementById("OperB");
var campoOperador = document.getElementById("operac");
var reset = document.getElementById("reset");
var division = document.getElementById("division");
var multiplicacion = document.getElementById("multiplicacion");
var resta = document.getElementById("resta");
var suma = document.getElementById("suma");
var verificar = document.getElementById("verificar");
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");
var coma = document.getElementById("coma");
var borradoParcial = document.getElementById("borradoParcial");
//------------------------------------------------------------------------
// Controlador: Se Encarga de Enlazar el Modelo de Datos con la Vista
//------------------------------------------------------------------------
function init() {
//---------------------------------------------
//Digitos
//---------------------------------------------
uno.onclick = function(e) {
funcionalidadBotonNumerico("1");
};
dos.onclick = function(e) {
funcionalidadBotonNumerico("2");
};
tres.onclick = function(e) {
funcionalidadBotonNumerico("3");
};
cuatro.onclick = function(e) {
funcionalidadBotonNumerico("4");
};
cinco.onclick = function(e) {
funcionalidadBotonNumerico("5");
};
seis.onclick = function(e) {
funcionalidadBotonNumerico("6");
};
siete.onclick = function(e) {
funcionalidadBotonNumerico("7");
};
ocho.onclick = function(e) {
funcionalidadBotonNumerico("8");
};
nueve.onclick = function(e) {
funcionalidadBotonNumerico("9");
};
cero.onclick = function(e) {
funcionalidadBotonNumerico("0");
};
coma.onclick = function(e) {
funcionalidadBotonNumerico(".");
};
//------------------------------------------------
//Teclas de Función Especial
//------------------------------------------------
reset.onclick = function(e) {
resetear();
};
borradoParcial.onclick = function(e) {
funcionBorradoParcial();
};
//-------------------------------------------------
// Teclas de Operación
//-------------------------------------------------
suma.onclick = function(e) {
botonDeOperacion("+");
};
resta.onclick = function(e) {
botonDeOperacion("-");
};
multiplicacion.onclick = function(e) {
botonDeOperacion("*");
};
division.onclick = function(e) {
botonDeOperacion("/");
};
verificar.onclick = function(e) {
operadorPulsado = false;
resolver();
};
}
//---------------------------------------------------
function resetear() {
operandoa = '';
operandob = '';
resultado.textContent = "";
campoOperandoA.textContent = operandoa;
campoOperandoB.textContent = operandob;
}
function funcionalidadBotonNumerico(digito){
if (operadorPulsado) {
operandob += digito;
campoOperandoB.textContent = operandob;
} else {
operandoa += digito;
campoOperandoA.textContent = operandoa;
}
}
function botonDeOperacion(digitooperacion){
operadorPulsado = true;
operacion = digitooperacion;
campoOperador.textContent = operacion;
}
function resolver() {
var res = "";
switch (operacion) {
case "+":
res = parseFloat(operandoa) + parseFloat(operandob);
break;
case "-":
res = parseFloat(operandoa) - parseFloat(operandob);
break;
case "*":
res = parseFloat(operandoa) * parseFloat(operandob);
break;
case "/":
if (operandob === 0) {
res = '?';
window.alert("ERROR: división entre cero");
} else {
res = parseFloat(operandoa) / parseFloat(operandob);
}
break;
}
resetear();
resultado.textContent = res;
}
function funcionBorradoParcial() {
if (operadorPulsado) {
operandob=operandob.slice(0,-1);
campoOperandoB.textContent = operandob;
} else {
operandoa=operandoa.slice(0,-1);
campoOperandoA.textContent = operandoa;
}
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Gloria Hallelujah', cursive;
font-size: 22px;
background: href();
}
li {
list-style: none;
}
html {
height: 100%;
background: white;
background: radial-gradient(circle, #fff 24%, #CCE);
background-size: cover;
}
#Contenedor {
width: 290px;
text-align: center;
height: auto;
margin: 4px auto;
}
#calculadora {
width: 234px;
height: 230px;
margin: 0 auto;
padding: 2px;
background-color: #65D277;
}
#operac,
#equal {
float: left;
margin-left: 6px;
margin-top: 7px;
}
#OperA,
#OperB,
#resultado {
float: left;
/*margin: 8px auto 8px 4px;*/
margin: 7px -3px 5px 8px;
width: 25%;
height: 30px;
font-size: 16px;
overflow: hidden;
text-align: right;
color: #48484D;
/*padding: 4px;*/
background-color: #fff;
box-shadow: inset -1px -1px 4px 1px #eee;
}
.Teclas li {
width: 50px;
height: 30px;
border-radius: 3px;
color: #fff;
background-color: #6C73FA;
cursor: pointer;
float: left;
margin: 0px -3px 5px 8px;
line-height: 30px;
text-align: center;
box-shadow: 0px 3px 1px 0px #444651;
}
.Teclas li:hover {
background-color: #BEF9F0;
color: #6C73FA;
transition: 0.2s;
}
.Teclas li:active {
box-shadow: 0px 1px 1px 0px #444651;
}
.verificar {
width: 93.4% !important;
}
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Tarea 2.8 - Kepriel</title>
<link type="text/css" href="css/estilos.css" rel="stylesheet">
</head>
<body onload="init()">
<div id="Contenedor">
<header class="Titulo">
<h1>Calculadora</h1>
</header>
<section id="calculadora">
<header class="top">
<div id="OperA"></div>
<div id="operac">+</div>
<div id="OperB"></div>
<div id="equal">=</div>
<div id="resultado"></div>
</header>
<ul class="Teclas">
<li></li>
<li id="borradoParcial">DEL</li>
<li id="reset">C</li>
<li></li>
<li id="siete">7</li>
<li id="ocho">8</li>
<li id="nueve">9</li>
<li id="division">⁄</li>
<li id="cuatro">4</li>
<li id="cinco">5</li>
<li id="seis">6</li>
<li id="multiplicacion">*</li>
<li id="uno">1</li>
<li id="dos">2</li>
<li id="tres">3</li>
<li id="resta">-</li>
<li id="cero">0</li>
<li id="coma">.</li>
<li id="suma">+</li>
<li id="verificar">=</li>
</ul>
</section>
</div>
<script type="text/javascript" src="js/calculadora.js"></script>
</body>
</html>