Can't make the input on my calculator evaluate the sum

March 22, 2022

I have just started learning to code and am currently building my first calculator using javascript. It works coming down to the input being projected on the screen from clicking the button and the ‘C’ clear button clears the input screen, however I keep getting a syntax error when using the ‘=" button when trying to evaluate and need assistance, have tried multiple ways but am struggling when trying to use the screen.value.

// Selecting elements

const buttons = document.querySelectorAll(".btn");
let screen = document.getElementById("input");

//function to add input onto screen
const addTo = function(e) {
  screen.value += e;
};

for (let i = 0; i < buttons.length; i++) {
  buttons[i].addEventListener("click", function() {
    // log click to a variable
    const input = buttons[i].value;

    // add clicked input to screen
    addTo(input);

    // make screeninput evaluate sum
    if (input === "=") {
      let equals = eval(screen.value);
      equals = screen.value;
    } else if (input === "C") {
      screen.value = " ";
    }
  });
}

<h1>MY CALCULATOR</h1>
<div id=c alc class="calc-container">
  <div id=s creen class="input-container">
    <input type=text name=d isplay id=i nput class="user-input" value="" />
  </div>

  <div id="wrapper" class="button-container">

    <input value="9" type=b utton class="btn" />
    <input value="8" type=b utton class="btn" />
    <input value="7" type=b utton class="btn" />
    <input value="6" type=b utton class="btn" />
    <input value="5" type=b utton class="btn" />
    <input value="4" type=b utton class="btn" />
    <input value="3" type=b utton class="btn" />
    <input value="2" type=b utton class="btn" />
    <input value="1" type=b utton class="btn" />
    <input value="*" type=b utton class="btn" />
    <input value="0" type=b utton class="btn" />
    <input value="+" type=b utton class="btn" />
    <input value="/" type=b utton class="btn" />
    <input value="-" type=b utton class="btn" />
    <input value="=" type=b utton class="btn equals">
    <input value="." type=b utton class="btn" />
    <input value="C" type=b utton class="btn" />

  </div>
</div>

>Solution :

In case of = you are trying to evaluate an expression with =, for example 10+2=. Which is an invalid expression. You should avoid that = from the eval statement and execute only 10+2.

Call addTo only if the input is not = and C to fix this.

// Selecting elements

const buttons = document.querySelectorAll(".btn");
let screen = document.getElementById("input");

//function to add input onto screen
const addTo = function (e) {
  screen.value += e;
};

for (let i = 0; i < buttons.length; i++) {
  buttons[i].addEventListener("click", function () {
    // log click to a variable
    const input = buttons[i].value;


    // make screeninput evaluate sum
    if (input === "=") {
      let equals = eval(screen.value);
      screen.value = equals;
    } else if (input === "C") {
      screen.value = " ";
    } else {
      // add clicked input to screen
      addTo(input);
    }
  });
}

<h1>MY CALCULATOR</h1>
<div id=calc class="calc-container">
  <div id=screen class="input-container">
    <input type=text name=display id=input class="user-input" value="">
    </input>
  </div>

  <div id="wrapper" class="button-container">

    <input value="9" type=button class="btn"></input>
    <input value="8" type=button class="btn"></input>
    <input value="7" type=button class="btn"></input>
    <input value="6" type=button class="btn"></input>
    <input value="5" type=button class="btn"></input>
    <input value="4" type=button class="btn"></input>
    <input value="3" type=button class="btn"></input>
    <input value="2" type=button class="btn"></input>
    <input value="1" type=button class="btn"></input>
    <input value="*" type=button class="btn"></input>
    <input value="0" type=button class="btn"></input>
    <input value="+" type=button class="btn"></input>
    <input value="/" type=button class="btn"></input>
    <input value="-" type=button class="btn"></input>
    <input value="=" type=button class="btn equals"></input>
    <input value="." type=button class="btn"></input>
    <input value="C" type=button class="btn"></input>

  </div>
</div>