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>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>Because of you do eval(screen.value).
When you call the eval function, your screen.value is 'xxxx='.
This is not in the syntax of eval.