"Uncaught SyntaxError: Invalid left-hand side in assignment"

Question

I am currently trying to run the calculator javascript app that i have created but am encountering a left hand side error no matter what I do some help correcting this issue would be greatly appreciated. It seems that there is some kind of syntax error but I have reviewed my code multiple times and can't find the issue.

<!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>Document</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="main">
      <div class="calculator">
        <div class="display"></div>
        <div class="clearButton">Clear</div>
        <div class="deleteButton">Delete</div>
        <div class="btn">0</div>
        <div class="btn">1</div>
        <div class="btn">2</div>
        <div class="btn">3</div>
        <div class="btn">4</div>
        <div class="btn">5</div>
        <div class="btn">6</div>
        <div class="btn">7</div>
        <div class="btn">8</div>
        <div class="btn">9</div>
        <div class="btn">+</div>
        <div class="btn">-</div>
        <div class="btn">*</div>
        <div class="btn">/</div>
        <div class="btn">=</div>
      </div>
    </div>
    <script src="main.js"></script>
  </body>
</html>

const calculator = function () {
  const displayText = document.getElementById("display");
  const problem = [];

  const math = function (buttonValue) {
    problem.push(buttonValue);

    console.log(problem);

    if (buttonValue === "=") {
      const result = eval(problem.join(""));
      console.log(result);
      displayText.textContent = result;
      problem.length = 0;
      problem.push(result);
    }
  };

  const btn0 = document.getElementById("0");
  btn0.addEventListener("click", function () {
    displayText.textContent += "0";
    math(btn0.textContent);
  });

  const btn1 = document.getElementById("1");
  btn1.addEventListener("click", function () {
    displayText.textContent += "1";
    math(btn1.textContent);
  });

  const btn2 = document.getElementById("2");
  btn2.addEventListener("click", function () {
    displayText.textContent += "2";
    math(btn2.textContent);
  });

  const btn3 = document.getElementById("3");
  btn3.addEventListener("click", function () {
    displayText.textContent += "3";
    math(btn3.textContent);
  });

  const btn4 = document.getElementById("4");
  btn4.addEventListener("click", function () {
    displayText.textContent += "4";
    math(btn4.textContent);
  });

  const btn5 = document.getElementById("5");
  btn5.addEventListener("click", function () {
    displayText.textContent += "5";
    math(btn5.textContent);
  });

  const btn6 = document.getElementById("6");
  btn6.addEventListener("click", function () {
    displayText.textContent += "6";
    math(btn6.textContent);
  });

  const btn7 = document.getElementById("7");
  btn7.addEventListener("click", function () {
    displayText.textContent += "7";
    math(btn7.textContent);
  });

  const btn8 = document.getElementById("8");
  btn8.addEventListener("click", function () {
    displayText.textContent += "8";
    math(btn8.textContent);
  });

  const btn9 = document.getElementById("9");
  btn9.addEventListener("click", function () {
    displayText.textContent += "9";
    math(btn9.textContent);
  });

  const btnPlus = document.getElementById("+");
  btnPlus.addEventListener("click", function () {
    displayText.textContent += "+";
    math(btnPlus.textContent);
  });

  const btnMinus = document.getElementById("-");
  btnMinus.addEventListener("click", function () {
    displayText.textContent += "-";
    math(btnMinus.textContent);
  });

  const btnMultiply = document.getElementById("*");
  btnMultiply.addEventListener("click", function () {
    displayText.textContent += "*";
    math(btnMultiply.textContent);
  });

  const btnDivide = document.getElementById("/");
  btnDivide.addEventListener("click", function () {
    displayText.textContent += "/";
    math(btnDivide.textContent);
  });

  const btnEqual = document.getElementById("=");
  btnEqual.addEventListener("click", function () {
    math(btnEqual.textContent);
  });

  const btnClear = document.querySelector(".clearButton");
  btnClear.addEventListener("click", function () {
    displayText.textContent = "";
    problem.length = 0;
  });

  const btnDelete = document.querySelector(".deleteButton");
  btnDelete.addEventListener("click", function () {
    problem.pop();
    displayText.textContent = problem.join("");
  });
};

calculator();

the html code. Can someone help me with this CSS problem?

That's not the error being produced when running this code snippet. Can you indicate specifically which line of code is producing this error, and/or produce a runnable [mcve] which demonstrates the error? — David, Mar 28 '23 at 21:37
`eval(problem.join(""));` would appear to be your problem. That's [not how to do math in a calculator](https://stackoverflow.com/q/11422513/1048572). — Bergi, Mar 28 '23 at 21:38

score 0 · Answer 1 · answered Mar 28 '23 at 21:42

0

You should not add the = sign to the array, as that causes it to no longer be a valid expression after joining.

if (buttonValue === "=") {
  // ...
} else problem.push(buttonValue);

answered Mar 28 '23 at 21:42

Unmitigated

76,500
11
62
80

"Uncaught SyntaxError: Invalid left-hand side in assignment"

1 Answers1