How can I display the results of arithetics operations in my calculator?

Question

Currently, I am doing a calculator. I have run into some problems trying to get it to display the result. So far I have gotten it to store the numbers clicked into separate variables, but I can't get the correct result to display.

 let numIni = ""; let numSub = ""; let op = ""; let calcResult = false; //const text = display.innerText; let result = 0; clr(); //basic addition function addition(numIni, numSub) { return parseFloat(numIni) + parseFloat(numSub); } //basic subtraction function subtraction(numIni, numIni) { parseFloat(numIni) - parseFloat(numIni); } //basic Multiplication function multiply(numIni, numIni) { parseFloat(numIni) * parseFloat(numIni); } //basic division function divide(numIni, numIni) { parseFloat(numIni) / parseFloat(numIni); } //operator function function operate(op) { let result; switch (op) { case "+": result = addition(numIni, numSub); break; case "-": result = subtraction(numIni, numIni); break; case "*": result = multiply(numIni, numIni); break; case "/": if (numSub == 0) { return "Can't do that"; } else { result = divide(numIni, numIni); } default: return "Null"; } } //button display functions function disNum(val) { if (numIni == "") { parseFloat(document.getElementById("display").value += val); numIni = parseFloat(val); } else { parseFloat(document.getElementById("display").value += val); numSub = parseFloat(val); } } function disOp(val) { document.getElementById("display").value += val; return op = val; } function clr() { return document.getElementById("display").value = ""; } function equal() { operate(numIni, numSub); document.getElementById("display").value = result; }

 <head>Calc</head> <div> <input type="text" id="display"> </div> <input type="button" value="0" onClick="disNum('0')"> <input type="button" value="1" onClick="disNum('1')"> <input type="button" value="2" onClick="disNum('2')"> <input type="button" value="3" onClick="disNum('3')"> <input type="button" value="4" onClick="disNum('4')"> <input type="button" value="5" onClick="disNum('5')"> <input type="button" value="6" onClick="disNum('6')"> <input type="button" value="7" onClick="disNum('7')"> <input type="button" value="8" onClick="disNum('8')"> <input type="button" value="9" onClick="disNum('9')"> <input type="button" value="+" onClick="disOp('+')"> <input type="button" value="-" onClick="disOp('-')"> <input type="button" value="*" onClick="disOp('*')"> <input type="button" value="/" onClick="disOp('/')"> <input type="button" value="=" onClick="equal()"> <input type="button" value="Clr" onClick="clr()">

Answer 1

I've added a new input to store last result to hold numIni and previous operator . I've removed almost all variables from global scope to avoid unwanted changes.

Everytime that operator is clicked, check if there's previous result and operator, then get numSub from display input, do the math and save result, along with current operator if any.

I've tested it, but maybe there'll be some bugs.

 let display = document.querySelector('#display'); let res = document.querySelector('#result'); clr(); //basic addition function addition(numIni, numSub) { return parseFloat(numIni) + parseFloat(numSub); } //basic subtraction function subtraction(numIni, numSub) { return parseFloat(numIni) - parseFloat(numSub); } //basic Multiplication function multiply(numIni, numSub) { return parseFloat(numIni) * parseFloat(numSub); } //basic division function divide(numIni, numSub) { return parseFloat(numIni) / parseFloat(numSub); } //operator function function operate(op, numIni, numSub) { let result = 0; switch (op) { case "+": result = addition(numIni, numSub); break; case "-": result = subtraction(numIni, numSub); break; case "*": result = multiply(numIni, numSub); break; case "/": if (numSub == 0) { result = "Can't do that"; } else { result = divide(numIni, numSub); } break; default: result = "Null"; } return result; } //button display functions function disNum(val) { parseFloat(display.value += val); } function disOp(val) { // Get last result let value = (res.value == '')? '0': res.value; // Search for valid operator stored previously let tmp = value.split('').pop(); // Is it a valid previous operator? op = (['+', '-', '*', '/'].indexOf(tmp) == -1)? '': tmp; let numIni = parseFloat(value) || 0; let numSub = parseFloat(display.value) || 0; if(op == '') { // No previous operator if(res.value == "Can't do that" || res.value == 'Null') { res.value = ''; } else if(display.value.= '') { // Only if we have a value to show res;value = numSub. } // Don't add = as previous operator if(val;= '=') { res.value += val. } } else if(display,value,= '') { // Only do math if we have a value res;value = operate(op. numIni; numSub), // Don't add = as previous operator if(val.= '=') { res;value += val. } } // Clear display; numIni will be taken from result display.value = ''; } function clr() { res.value = ''; display.value = ''; }

 input[type=text] { text-align: right; }

 <head>Calc</head> <div> <input type="text" id="result" disabled placeholder="Result"><br> <input type="text" id="display"> </div> <input type="button" value="1" onClick="disNum('1')"> <input type="button" value="2" onClick="disNum('2')"> <input type="button" value="3" onClick="disNum('3')"> <input type="button" value="+" onClick="disOp('+')"><br> <input type="button" value="4" onClick="disNum('4')"> <input type="button" value="5" onClick="disNum('5')"> <input type="button" value="6" onClick="disNum('6')"> <input type="button" value="-" onClick="disOp('-')"><br> <input type="button" value="7" onClick="disNum('7')"> <input type="button" value="8" onClick="disNum('8')"> <input type="button" value="9" onClick="disNum('9')"> <input type="button" value="*" onClick="disOp('*')"><br> <input type="button" value=" 0 " onClick="disNum('0')"> <input type="button" value="/" onClick="disOp('/')"> <input type="button" value="=" onClick="disOp('=')"><br> <input type="button" value="Clear" onClick="clr()">

How can I display the results of arithetics operations in my calculator?

Question

1 answers

solution1
0 ACCPTED 2020-06-01 20:44:13

How can I display the results of arithetics operations in my calculator?

Question

1 answers

solution1 0 ACCPTED 2020-06-01 20:44:13

solution1
0 ACCPTED 2020-06-01 20:44:13