0

Newbie here, I am stuck with my Calculator project and cannot continue. There's something wrong with my code an cannot figure out what.

So the issue involves operations on multiple digit numbers (e.g. 22) as well as multiplying / dividing after summing / deducting.

Previously I was struggling with multiple operations in general, but it seems to be now working (with 1 digit numbers only though). Whenever I insert, e.g. 23, the function right away assigns 23 to both first and second operands and gives me 46.

The same thing happens when I use an operator in the 2nd operation which is different than the one used in the first operation (e.g if I use sum operator twice and then deduct, my result will be zero as the result gets assigned to both operands and continues with the operation).

Could someone advise what is the issue with this code? I think it's because of "operand1" variable. The expected behavior would be for the function to stop after each click, but then as soon as the operand1 value changes to "empty" again, the code continues. I tried to override this but nothing I come up with works, I feel like I'm missing something basic.

Thanks in advance!

let add = (a, b) => a + b;
let subtract = (a, b) => a - b;
let multiply = (a, b) => a * b;
let divide = (a, b) => a / b;

function operate(operator, a, b) {
 if (operator === '+') {
  return add(a, b);
 } else if (operator === '-') {
  return subtract(a, b);
 } else if (operator === '*') {
  return multiply(a, b);
 } else { return divide(a, b); }
};

const display = document.querySelector("h1"); // display
const numButtons = document.querySelectorAll(".num"); // 0 - 9
const operateButtons = document.querySelectorAll(".operator"); // +, -, *, /
const equals = document.querySelector('#equals') // =
const clearBtn = document.querySelector('#clear'); // AC

let displayValue = []; // add clicked numbers to array
let displayNumbers;  // joined array
let operations = ['a','operator','b'];
let operand1 = "empty"; // value that shows if 1st num has already been selected

numButtons.forEach((button) => {
 button.addEventListener('click', function() {
  displayValue.push(this.innerText);
  displayNumbers = displayValue.join("");
  display.textContent = displayNumbers;

 operateButtons.forEach((button) => {
  button.addEventListener('click', function insertOperand() {
   if(operand1 === "empty") {
    operations[0] = Number(displayNumbers);
    operations[1] = this.textContent;
    displayValue = [];
    operand1 = "inserted";
   } else if (operand1 === "inserted") {
    operations[2] = Number(displayNumbers);
    result = operate(operations[1],operations[0],operations[2]);
    display.textContent = result;
    displayNumbers = result;
    displayValue = [];
    operand1 = "empty";
    button.removeEventListener('click',insertOperand);
   }
  });
 });
 });
});
mateusiax
  • 1
  • 2
    Now is a great time to [start using a debugger](https://stackoverflow.com/q/25385173/328193). (Modern browsers have one built-in for JavaScript on a web page.) With a debugger you can set breakpoints to pause execution of the code and step through the logic line by line, observing the exact runtime behavior and changing values of the variables. When you do this, which specific operation first produces an unexpected result? What were the exact values used in that operation? What was the result? What result was expected? Why? – David May 17 '22 at 11:24
  • Currently, each time you click a `numButton`, you are recreating event listeners for each operand buttons, I don't think this is the intended behavior. I suggest you to declare callback functions apart, then passing them as argument to `addEventListener`. Those nested functions calls and definitions is very confusing. –  May 17 '22 at 11:46

0 Answers0