Concat function not working or bad if then statement?-CodePudding

I'm making a calculator and ran into some issues with an if/else function giving me unexpected results. The logic seems kind of sound when I run it over so I would like some input on what I may have wrong here. The code is giving unexpected results from expressionMaker where it seems to clear the first "if --> if " statements but none of the else ones. The concat function especially is a head scratcher. Here is the function in question:

function expressionMaker(keyValue) {
  const concat = (a, b) => {
    return (""   a   b)
  };
  if (expression.a == 0 || expression.operand == 0 && EventTarget == numbers) {
    if (expression.a == 0) {
       expression.a = keyValue
    }
    else if (!expression.a == 0) {
      expression.a = concat(expression.a, keyValue)
    }
    display.innerHTML = expression.a
  }
  else if (!expression.a == 0 && expression.b == 0 && EventTarget == operators) {
    expression.operand = keyValue
  }
  else if (!expression.a == 0 && !expression.operand == 0 && EventTarget == numbers) {
      if (!expression.b == 0) {
        expression.b = concat(expression.b, keyValue)
      }
      else {
        expression.b = keyValue
      }
  }
  else {
    null
  }
}

Here is the full code: Html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Calculator</title>
    <link rel="stylesheet" href="styles.css">
    
</head>
<body>
<div id="display">
    <div id="miniScreen"></div>
</div>
<div id="calculatorGrid">
    <button  id="nums" data-number="1">1</button>
    <button  id="nums"  data-number="2">2</button>
    <button  id="nums"  data-number="3">3</button>
    <button  data-number="4">4</button>
    <button  data-number="5">5</button>
    <button  data-number="6">6</button>
    <button  data-number="7">7</button>
    <button  data-number="8">8</button>
    <button  data-number="9">9</button>
    <button  data-number="0">0</button>
    <button  id="plus" data-operator=" "> </button>
    <button  id="subtract" data-operator="-">-</button>
    <button  id="multiply" data-operator="*">x</button>
    <button  id="divide" data-operator="/">÷</button>
    <button id="clear">clear</button>
    <button id="evaluate"> =</button>
</div>
<script src="script.js" defer></script>
</body>
</html>

And full javascript

const btn = document.getElementById("calculatorGrid");
const display = document.getElementById("display");
const miniscreen = document.getElementById("miniScreen")
const equals = document.getElementById("evaluate")
const numbers = document.querySelectorAll(".Nbuttons");
const clear = document.getElementById("clear");
const add = document.getElementById("plus");
const sub = document.getElementById("subtract");
const multi = document.getElementById("multiply");
const divi = document.getElementById("divide");
const operators = document.querySelectorAll(".operators");
let nums = document.getElementById("nums")
numbers.values  = nums.textContent
const calculate = (() => {
  const add = (a, b) => a   b;
  const sub = (a, b) => a - b;
  const mul = (a, b) => a * b;
  const div = (a, b) => a / b;
  return {
    add,
    sub,
    mul,
    div,
  };
});
const expression = {
  a: 0,
  operand: 0,
  b: 0,
};
function expressionMaker(keyValue) {
  const concat = (a, b) => {
    return (""   a   b)
  };
  if (expression.a == 0 || expression.operand == 0 && EventTarget == numbers) {
    if (expression.a == 0) {
       expression.a = keyValue
    }
    else if (!expression.a == 0) {
      expression.a = concat(expression.a, keyValue)
    }
    display.innerHTML = expression.a
  }
  else if (!expression.a == 0 && expression.b == 0 && EventTarget == operators) {
    expression.operand = keyValue
  }
  else if (!expression.a == 0 && !expression.operand == 0 && EventTarget == numbers) {
      if (!expression.b == 0) {
        expression.b = concat(expression.b, keyValue)
      }
      else {
        expression.b = keyValue
      }
  }
  else {
    null
  }
}
function evaluate() {
  var result 
  if (expression.operand == " ") {
    var result = calculate.add(expression.a, expression.b)
  }
  else if (expression.operand == "-") {
    result = calculate.sub(expression.a, expression.b)
  }
  else if (expression.operand == "x") {
    result = calculate.mul(expression.a, expression.b)
  }
  else if (expression.operand == "/") {
    result = calculate.div(expression.a,  expression.b)
  }
  else {
    return null
  }
  display.innerHTML = result
  return result
}

clear.addEventListener("click", () => {
  clearOut()
})
equals.addEventListener("click", () => {
  evaluate(expression.a, expression.b)
})

function setNums() {
  let nums = document.getElementById("nums")
  numbers.values  = nums.textContent
};
setNums();
function clearOut() {
   display.textContent = 0
   expression.a = 0
   expression.operand = 0
   expression.b = 0

};



clear.addEventListener("click", function() {
    clearOut();
});

operators.forEach(function(element) {
  element.addEventListener("click", function() {
    if (EventTarget == add) {
      expression.operand = " "
      display.innerHTML = " "
    }
    else if (EventTarget == sub) {
      expression.operand = "-"
      display.innerHTML = "-"
    }
    else if (EventTarget == multi) {
      expression.operand = "x"
      display.innerHTML = "x"
    }
    else if (EventTarget == divi) {
      expression.operand = "/"
      display.innerHTML = "/"
    }
  })
})
numbers.forEach(function(element) {
    element.addEventListener("click", function(event) {
        var key = event.target
        let keyValue = key.textContent
        expressionMaker(keyValue)
    });
});
//equals.addEventListener("click", eval)
//Finished code above, iffy not done code below

//Testing  section below vvvvv

/*function appendNumber(number) {
    if (screen.textContent === '0' || false )
      clearOut()
    screen.textContent  = number
  }*/

//testing ^^^^
 
//evaluation functionality 

  
 // how to use: calculator.add(3,5); // 8
  //calculator.sub(6,2); // 4
 // calculator.mul(14,5534); // 7747

/*function operate (num1, num2, operator) {
    return screen.innerHTML = (num1 operator num2)
}
*/

CodePudding user response：

Let's start with the beginning, you can replace this function, with 4 separate "addEventListener", it's going to be way less confusing and less error prone.

operators.forEach(function(element) {
  element.addEventListener("click", function() {
    if (EventTarget == add) {
      expression.operand = " "
      display.innerHTML = " "
    }
    else if (EventTarget == sub) {
      expression.operand = "-"
      display.innerHTML = "-"
    }
    else if (EventTarget == multi) {
      expression.operand = "x"
      display.innerHTML = "x"
    }
    else if (EventTarget == divi) {
      expression.operand = "/"
      display.innerHTML = "/"
    }
  })
})

New version:

add.addEventListener("click", function() {
    expression.operand = " ";
    display.innerHTML  = " ";
});

sub.addEventListener("click", function() {
    expression.operand = "-";
    display.innerHTML  = "-";
});

multi.addEventListener("click", function() {
    expression.operand = "x";
    display.innerHTML  = "x";
});

divi.addEventListener("click", function() {
    expression.operand = "/";
    display.innerHTML  = "/";
});

The thing with the "unexpected behavior" is that I'm not sure what your logic was trying to do, the only thing I can suggest you is take a look at this: https://developer.chrome.com/docs/devtools/javascript/ you'll debug a lot while coding, so it's always great to give it a try.

Using the developer tools, you'll be able to see the values in every variable at each step, that should make it easier for you to find where things are going south.

Hope you get it working!

CodePudding user response：

I hope the below answer is suitable for you.

may be your elements have duplicate id like id="nums"

you can also complete like this..

const miniscreen = document.getElementById("miniScreen");


function clearValue(){
  miniscreen.innerHTML=0;
}

function mini(param){
  if(miniscreen.innerHTML==0){
    miniscreen.innerHTML=param;
  }else{
  miniscreen.innerHTML =param;
  }
}

function calculate(){
  
  miniscreen.innerHTML=eval(miniscreen.innerHTML);
}

<body>
<div id="display">
    <div id="miniScreen">0</div>
</div>
<div id="calculatorGrid">
    <button  onclick="mini('1')" data-number="1">1</button>
    <button  onclick="mini('2')"  data-number="2">2</button>
    <button  onclick="mini('3')"  data-number="3">3</button>
    <button  onclick="mini('4')">4</button>
    <button  onclick="mini('5')">5</button>
    <button  onclick="mini('6')">6</button>
    <button  onclick="mini('7')">7</button>
    <button  onclick="mini('8')">8</button>
    <button  onclick="mini('9')">9</button>
    <button  onclick="mini('0')">0</button>
    <button  id="plus" onclick="mini(' ')"> </button>
    <button  id="subtract" onclick="mini('-')">-</button>
    <button  id="multiply" onclick="mini('*')">x</button>
    <button  id="divide" onclick="mini('/')">÷</button>
    <button id="clear" onclick="clearValue()">clear</button>
    <button id="evaluate" onclick="calculate()"> =</button>
</div>
</body>

Thank you.