4
I’m a beginner and still in the saga of building a calculator. I can’t use it() I don’t know if it was the right choice but I used array to store the numbers, I’ve tried to use a third array to get the results using push, but the value that shows me whether the result variable is an array or not is not correct, so I don’t know exactly where I went wrong.
let tela = document.getElementById('visor');
let nums = [];
let oldnum = [];
let operation;
let result = 0;
function mostranum(num) {
tela.innerHTML += num;
nums.push(Number(num));
console.log(nums)
}
function limpa() {
nums.pop();
tela.innerHTML = nums;
}
function operator(ope) {
if (nums.length > 8) {
nums.length = 8;
}
if (oldnum.length == 0) { // quer dizer que é a primeira operação
oldnum = nums;
console.log(`old num recebeu ${oldnum}`);
//console.log(typeof nums)
operation = ope;
nums.splice(0);
tela.innerHTML = '';
} else if (oldnum.length != 0 && ope != 'result') {
// executar a operação anterior
oldnum = calcula(oldnum, nums, operation);
console.log(`resultado ${oldnum}`);
console.log(typeof oldnum);
}
}
function calcula(num1, num2, oper) {
for (let c = 0; c < num1.length; c++) {
switch (oper) {
case 'sum':
result += num1[c] + num2[c];
//result.push(parseInt(num1[c]) + parseInt(num2[c]));
break;
case 'subtract':
result = num1 - num2;
break;
case 'multiplication':
result = num1 * num2;
break;
case 'division':
result = num1 / num2;
break;
}
}
return result;
}body{
margin: 0;
background-color: #d44b57;
}
#calculadora{
display: flex;
flex-wrap: wrap;
justify-content: center;
width: 350px;
align-items: center;
align-content: center;
margin: auto;
}
button{
border: 0;
background: #9d0229;
color: #ffffff;
cursor: pointer;
margin: 5px;
width: 70px;
line-height: 75px;
font-size: 16;
transition: all 0.5s;
}
#visor{
width: 240px;
}<div id='calculadora'>
<button id='clear' onclick="limpa()">C</button>
<div id="visor"></div>
<button class="num" id="n7" value="7" onclick="mostranum(7)">7</button>
<button class="num" id="n8" value="8" onclick="mostranum(8)">8</button>
<button class="num" id="n9" value="9" onclick="mostranum(9)">9</button>
<button class="ops" id="sum" onclick="operator('sum')">+</button>
<button class="num" id="n4" value="4" onclick="mostranum(4)">4</button>
<button class="num" id="n5" value="5" onclick="mostranum(5)">5</button>
<button class="num" id="n6" value="6" onclick="mostranum(6)">6</button>
<button class="ops" id="subtract" value="-" onclick="operator('subtract')">-</button>
<button class="num" id="n1" value="1" onclick="mostranum(1)">1</button>
<button class="num" id="n2" value="2" onclick="mostranum(2)">2</button>
<button class="num" id="n3" value="3" onclick="mostranum(3)">3</button>
<button class="ops" id="multiplication" value="*" onclick="operator('multiplication')">*</button>
<button class="num" id="0" value="0" onclick="mostranum(0)">0</button>
<button class="ops" id="float" value=".">.</button>
<button class="result" id="result" onclick="operator('result')">=</button>
<button class="ops" id="division" value="/" onclick="operator('division')">/</button>
</div>
I edited the question to be able to run code. You can join the CSS to be more visible?
– Sergio
it would be simpler to use 2 variables (first and second number= and the operation... even if you wanted to do something like 4+5+6+7+8...etc, tbm would need an array for operation.. could be 4+5/6*7 ... etc this will complicate your code too much, but that’s exactly what you want to do?
– Ricardo Pontual
Exactly Ricardo Pontual, I agree 100%.
– user187547
So Ricardo, I thought: using the buttons the user inserts the value , then the operator , then the second number, but in case he does not choose to finish the operation but to insert a second operator , the operation he put first ex: in a 1 + in a 2 , would be executed and the result stored in the variable that receives the first number and so do the process again
– Caroline Santos