C
Based on the answer of @Ruslan López, I leave my answer with the most simplified javascript.First: If your answer has been resolved but you have a new doubt, I recommend answering the first and opening a second question on another topic. If the problem is about a user's response, add a comment to tell him to see if he could correct his response.About the code: I'll try to explain it little by little and in the end I leave it all to you so it's not too smooth. (In the end I also solve the problem with division.)Instead of saving all the data in different variables, I would only store the operators, the operation, the result and two extra variables: one with the list of keys and one that will check if we are acting on one operator or another. var teclas = document.querySelector(".Teclas");
var operA = document.querySelector("#OperA");
var operB = document.querySelector("#OperB");
var operacion = document.querySelector("#operac");
var resultado = document.querySelector("#resultado");
var operador = true;
When operador Whatever. true We will be acting on operator A, while if it is false about operator B.The idea is that everything develops within a function that will only be executed when necessary, that is: it will be checked when you click on a key and the function will be executed at that time. Having the list of keys stored in a variable, you will need to check when you click on it teclas.onclick = function(e) {}The whole code will go inside this function.The first thing to do will be to check what key has been clicked, for this we use e.target that will tell us what element the event has begun. We will store its contents in a variable.var teclaPulsada = e.target.innerText;
Now we have the value of the pressed key but we don't know what it is. To begin, we will divide it according to whether it is a number or not, to do so, we create a variable that will check if the result is a numerical value:var isNum = parseInt(teclaPulsada);
Now we have two variants, if it's a number and if it's not:
if(isNaN(isNum)) That way we analyze whether the value is NOT a number (if its result is NaN "Not a Number").Let's start if the YES result is a number (in the else of if from above). If it is a number, you will need to check the operator on which we are and add the numerical value to the already written:if(operador) {
operA.innerText += isNum;
} else {
operB.innerText += isNum;
}
Yeah. operador That's it. true We will be on operator A and therefore add the numerical value to content that the operator already has. Same if operador That's it. false in operator B.We go back to the ifwhen the value collected is not a number. In this case we have several possibilities:Coma/PuntoDelete Delete operatorOperationEmpty element (you have two in your example)Same.The fastest way to do it would be with a switch analyzing the value of teclaPulsadaI mean, switch (teclaPulsada)If we press on com/point:The value must be added . the operator in question. To do this, we check which operator we are and add the point to its value:case ".":
if(operador) {
operA.innerText += teclaPulsada;
} else {
operB.innerText += teclaPulsada;
}
break;
If we press on delete (DEL):In this case it is simple, we change the value of the two operators and the result by an empty chain. Don't forget to reset the checker operador a true to start with operator A again.case "DEL":
operA.innerText = "";
operB.innerText = "";
resultado.innerText = "";
operador = true;
break;
If we press on delete operator (C):As we just want to erase the operator on which we are, we check what it is and overwrite its value by an empty chain. case "C":
if(operador) {
operA.innerText = "";
} else {
operB.innerText = "";
}
break;
If we press on one of the vacuum elements:
Even if it seems silly, there are these elements, it is important to keep track of what will happen when you click on them to avoid problems. It's as simple as telling him not to do anything:case "":
break;
If we press on equal:
This is the most complicated because it is the one that contains logic.
First we create two variables that will serve to store the data of the introduced operators, in case there is a blank operator, we will initialize them to zero and, if the operators are not empty, their data will be added. I mean:var num1 = 0;
var num2 = 0;
if (operA.innerText != ""){
num1 = parseFloat(operA.innerText);
}
if (operB.innerText != "") {
num2 = parseFloat(operB.innerText);
}
In this way, in case an operator does not contain data, that operator will be equal to zero and will not jump any errors. IMPORTANT: Operators come in string because we are taking their literal value, we must parse them to a numerical type. Since decimal numbers may arrive, they have been parased to floatIf they stop int It would fail when decimals are introduced.The next thing will be to do the same but with the operator.var operator = operacion.innerText;
The alert when dividing between zero has to be made at this point. We check that the operation is a division and that num2 It's zero and, if so, we show the alert and get out of it. switchif (operator == "/" && num2 == 0) {
alert("No se puede dividir por cero");
break;
}
And, finally, perform the operation and add its value to the result. To do this we will use eval() since the operation we have in string.resultado.innerText = eval(num1 + operator + num2);
To finish, we reset the value of operador a true for the next operation.If we press on any operating key:Since there is more than one possible operator, this will be the default option, we will simply change the value of operacion for the teclaPulsada and we will change the value of operador a false to continue with operator B.default:
operacion.innerText = teclaPulsada;
operador = false;
break;
We can already do any operation, now the problem is that we have to delete every time we finish an operation and it can be annoying. To fix this we could add a small fragment at the beginning of the code that checks if there is an operation done and, if yes, delete it when we begin to write the new operation.if(resultado.innerText != "") {
operA.innerText = "";
operB.innerText = "";
resultado.innerText = "";
}
Now we have the whole calculator! The problem you had with division is given by the way you write its symbol. The js is picking up the symbol of the same calculator and does not recognize the code as "division". You can solve it in two ways:Changing your HTML code and setting the symbol / directly.The moment you analyze the default You can make a if to check if the value is your code and, if so, replace the operation with / manually.Now yes, I leave the full code, I hope it will help you!function init() {
var teclas = document.querySelector(".Teclas");
var operador = true;
var operA = document.querySelector("#OperA");
var operB = document.querySelector("#OperB");
var operacion = document.querySelector("#operac");
var resultado = document.querySelector("#resultado");
var num1 = 0;
var num2 = 0;
var operator = "";
teclas.onclick = function(e) {
if(resultado.innerText != "") {
operA.innerText = "";
operB.innerText = "";
resultado.innerText = "";
}
var teclaPulsada = e.target.innerText;
var isNum = parseInt(teclaPulsada);
if(isNaN(isNum)) {
switch (teclaPulsada) {
case "=":
num1 = 0;
num2 = 0;
if (operA.innerText != ""){
num1 = parseFloat(operA.innerText);
}
if (operB.innerText != "") {
num2 = parseFloat(operB.innerText);
}
operator = operacion.innerText;
if (operator == "/" && num2 == 0) {
alert("No se puede dividir por cero");
break;
}
resultado.innerText = eval(num1 + operator + num2);
operador = true;
break;
case ".":
if(operador) {
operA.innerText += teclaPulsada;
} else {
operB.innerText += teclaPulsada;
}
break;
case "C":
if(operador) {
operA.innerText = "";
} else {
operB.innerText = "";
}
break;
case "DEL":
operA.innerText = "";
operB.innerText = "";
operador = true;
break;
case "":
break;
default:
operacion.innerText = teclaPulsada;
operador = false;
break;
}
} else {
if(operador) {
operA.innerText += isNum;
} else {
operB.innerText += isNum;
}
}
}
}* {
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>