We Keep Coding

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

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.

How to have javascript code on a different file then html?

I am constructing a calculator and this is my html for the calculator
HTML
<div id=”calculator”>
<input type="text" name="display" id="display" disabled>
<div class="first-row">
<input type="button" name="operator" value="+" action="add">
<input type="button" name="operator" value="-" action="subtract">
<input type="button" name="operator" value="*" action="multiple">
<input type="button" name="operator" value="/" action="divide">
</div>
<div class="second-row">
<input type="button" class="number" value="7">
<input type="button" class="number" value="8">
<input type="button" class="number" value="9">
</div>
<div class="third-row">
<input type="button" class="number" value="4">
<input type="button" class="number" value="5">
<input type="button" class="number" value="6">
</div>
<div class="fourth-row">
<input type="button" class="number" value="1">
<input type="button" class="number" value="2">
<input type="button" class="number" value="3">
</div>
<div class="fifth-row">
<input type="button" class="number" value="0" onclick="numberPress('0')">
<input type="button" class="operator" value="=">
</div>
</div>
<script type="text/javascript" src="../javascript/calculator.js"></script>
So in my javascript code, it checks if the button clicked is a operator, then if it is, then it prints out "operator" in the console.
Javascript
const calculator = document.getElementById("calculator")
calculator.addEventListener("click", e => {
if (e.target.matches("input")) {
key = e.target
name = e.target.name
if(name == "operator") {
console.log("operator")
}
}
})
The problem is that for the first line, it does not find the calculator id and it stores null in calculator. So, I tried putting the javascript in the same file, but still it does not work.
Any help will be very appreciated

You are not using this character "
You are using this character ”
So you are writing ”calculator” instead of "calculator" in your HTML
You must use plain quote marks in HTML

Keep focus on input box when click on button

I have a simple calculator with 2 inputs, and when I click on button I want to check if one of inputs is focused and if yes to enter that number.
But when I click on button I lose focus on inputs and get it on that button.
let activeElement = document.activeElement;
function numClick(number){
console.log("Num clicked=" + number);
let tempNumber="";
tempNumber = activeElement.value;
tempNumber = tempNumber + number;
activeElement.value=tempNumber;
}
<input id = "num1" type="text" name="num1" value="">
<span id="operacija"></span>
<input id = "num2" type="text" name="num2" value="">
<span>=</span>
<span id="rezultat">0</span>
<br><br>
<input type="button" onclick="clearIt() "value="C">
<input type="button" onclick="operationClick('/')"value="/">
<br>
<input type="button" onclick="numClick(7)" value="7">
<input type="button" onclick="numClick(8)" value="8">
<input type="button" onclick="numClick(9)" value="9">
<input type="button" onclick="operationClick('*')"value="*">
<br>
<input type="button" onclick="numClick(4)" value="4">
<input type="button" onclick="numClick(5)" value="5">
<input type="button" onclick="numClick(6)" value="6">
<input type="button" onclick="operationClick('-')"value="-">
<br>
<input type="button" onclick="numClick(1)" value="1">
<input type="button" onclick="numClick(2)" value="2">
<input type="button" onclick="numClick(3)" value="3">
<input type="button" onclick="operationClick('+')" value="+">
<br>
<input type="button" onclick="numClick(0)" value="0">
<input type="button" onclick="calculate()" value="=">
<br>
<script type="text/javascript" src="zadatak1.js"></script>
I am not using any framework, just JS...

This is just a working sample of the suggestion given by Teemu. So credit there.
We add a focus event to our input controls and record the last focused control.
document.addEventListener('DOMContentLoaded', function() {
document.querySelector('#num1').addEventListener('focus', setLastElement);
document.querySelector('#num2').addEventListener('focus', setLastElement);
});
var lastInputElement;
const setLastElement = (event) => {
lastInputElement = event.target;
console.log(event.target);
};
let activeElement = document.activeElement;
function numClick(number){
if (lastInputElement === undefined) return;
console.log("Num clicked=" + number);
let tempNumber="";
tempNumber = lastInputElement.value;
tempNumber = tempNumber + number;
activeElement.value=tempNumber;
}
<input id = "num1" type="text" name="num1" value="">
<span id="operacija"></span>
<input id = "num2" type="text" name="num2" value="">
<span>=</span>
<span id="rezultat">0</span>
<br><br>
<input type="button" onclick="clearIt() "value="C">
<input type="button" onclick="operationClick('/')"value="/">
<br>
<input type="button" onclick="numClick(7)" value="7">
<input type="button" onclick="numClick(8)" value="8">
<input type="button" onclick="numClick(9)" value="9">
<input type="button" onclick="operationClick('*')"value="*">
<br>
<input type="button" onclick="numClick(4)" value="4">
<input type="button" onclick="numClick(5)" value="5">
<input type="button" onclick="numClick(6)" value="6">
<input type="button" onclick="operationClick('-')"value="-">
<br>
<input type="button" onclick="numClick(1)" value="1">
<input type="button" onclick="numClick(2)" value="2">
<input type="button" onclick="numClick(3)" value="3">
<input type="button" onclick="operationClick('+')" value="+">
<br>
<input type="button" onclick="numClick(0)" value="0">
<input type="button" onclick="calculate()" value="=">
<br>
<script type="text/javascript" src="zadatak1.js"></script>

You can do something like this:
var activeInput = ""
function inputClick(input){
activeInput = input;
}
function numClick(number){
document.getElementById(activeInput).value += number;
}
<input id="num1" type="text" name="num1" value="" onclick=inputClick('num1')>
<span id="operacija"></span>
<input id="num2" type="text" name="num2" value="" onclick=inputClick('num2')>
<span>=</span>
<span id="rezultat">0</span>
<br><br>
<input type="button" onclick="clearIt() "value="C">
<input type="button" onclick="operationClick('/')"value="/">
<br>
<input type="button" onclick="numClick(7)" value="7">
<input type="button" onclick="numClick(8)" value="8">
<input type="button" onclick="numClick(9)" value="9">
<input type="button" onclick="operationClick('*')"value="*">
<br>
<input type="button" onclick="numClick(4)" value="4">
<input type="button" onclick="numClick(5)" value="5">
<input type="button" onclick="numClick(6)" value="6">
<input type="button" onclick="operationClick('-')"value="-">
<br>
<input type="button" onclick="numClick(1)" value="1">
<input type="button" onclick="numClick(2)" value="2">
<input type="button" onclick="numClick(3)" value="3">
<input type="button" onclick="operationClick('+')" value="+">
<br>
<input type="button" onclick="numClick(0)" value="0">
<input type="button" onclick="calculate()" value="=">
<br>

If you are ready to use Jquery, then you can try this code
let activeElement = document.activeElement;
var prevFocus;
$('input[type="text"]').focus(function() {
prevFocus = $(this);
});
function numClick(number){
console.log("Num clicked=" + number);
let tempNumber="";
tempNumber = activeElement.value;
tempNumber = tempNumber + number;
activeElement.value=tempNumber;
number= prevFocus.val() +''+ number
prevFocus.val(number)
prevFocus.focus()
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id = "num1" type="text" name="num1" value="">
<span id="operacija"></span>
<input id = "num2" type="text" name="num2" value="">
<span>=</span>
<span id="rezultat">0</span>
<br><br>
<input type="button" onclick="clearIt() "value="C">
<input type="button" onclick="operationClick('/')"value="/">
<br>
<input type="button" onclick="numClick(7)" value="7">
<input type="button" onclick="numClick(8)" value="8">
<input type="button" onclick="numClick(9)" value="9">
<input type="button" onclick="operationClick('*')"value="*">
<br>
<input type="button" onclick="numClick(4)" value="4">
<input type="button" onclick="numClick(5)" value="5">
<input type="button" onclick="numClick(6)" value="6">
<input type="button" onclick="operationClick('-')"value="-">
<br>
<input type="button" onclick="numClick(1)" value="1">
<input type="button" onclick="numClick(2)" value="2">
<input type="button" onclick="numClick(3)" value="3">
<input type="button" onclick="operationClick('+')" value="+">
<br>
<input type="button" onclick="numClick(0)" value="0">
<input type="button" onclick="calculate()" value="=">
<br>

This is sample code update. I have kept a track of the last focused on input and changed the text accordingly. I am guessing this is what you asked for. You can write the methods to control the value of the input fields accordingly.
<!-- Added an extra method to remember the last focus, we pass the element as the function param: -->
<input id="num1" type="text" name="num1" value="" onclick='updateFocus(num1)'>
<span id="operacija"></span>
<input id="num2" type="text" name="num2" value="" onclick='updateFocus(num2)'>
<span>=</span>
<span id="rezultat">0</span>
<br><br>
<input type="button" onclick="clearIt() " value="C">
<input type="button" onclick="operationClick('/')" value="/">
<br>
<input type="button" onclick="numClick(7)" value="7">
<input type="button" onclick="numClick(8)" value="8">
<input type="button" onclick="numClick(9)" value="9">
<input type="button" onclick="operationClick('*')" value="*">
<br>
<input type="button" onclick="numClick(4)" value="4">
<input type="button" onclick="numClick(5)" value="5">
<input type="button" onclick="numClick(6)" value="6">
<input type="button" onclick="operationClick('-')" value="-">
<br>
<input type="button" onclick="numClick(1)" value="1">
<input type="button" onclick="numClick(2)" value="2">
<input type="button" onclick="numClick(3)" value="3">
<input type="button" onclick="operationClick('+')" value="+">
<br>
<input type="button" onclick="numClick(0)" value="0">
<input type="button" onclick="calculate()" value="=">
<br>
<script>
var activeElement;
// Updating the current focused on input field:
function updateFocus(input) {
activeElement = input;
console.log("The active element is: +" + activeElement);
}
// Ensuring the number sent on click event is added to the current input box.
function numClick(number) {
// If a button pressed before focusing on any of the inputs:
if (activeElement == null) return;
console.log("Num clicked: " + number);
var tempText = activeElement.value;
tempText += number;
activeElement.value = tempText;
}
</script>

Cant change value of input box when I click a button

Hey guys I'm trying to make a simple JavaScript calculator.Right now I'm just trying to change the input box to display the button I clicked, but I'm having trouble figuring out why its not working. here's my code.
var display = document.getElementById('display');
function toScreen(x) {
display ='';
display.textContent = x;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>calculator</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Javascript Calculator</h1>
<div id="calculator">
<form>
<input type="text" id="display" disabled>
<br>
<input type="button" value="C" id="keys" onclick="toScreen('c')">
<input type="button" value="CE" id="keys" onclick="clearEntry('c')">
<input type="button" value="x^2" id="keys" onclick="powerOf('c')">
<input type="button" value="+" id="keys" onclick="toScreen('+')">
<br>
<input type="button" value="9" id="keys" onclick='toScreen("9")'>
<input type="button" value="8" id="keys" onclick="toScreen('8')">
<input type="button" value="7" id="keys" onclick="toScreen('7')">
<input type="button" value="-" id="keys" onclick="toScreen('-')">
<br>
<input type="button" value="6" id="keys" onclick="toScreen('6')">
<input type="button" value="5" id="keys" onclick="toScreen('5')">
<input type="button" value="4" id="keys" onclick="toScreen('4')">
<input type="button" value="x" id="keys" onclick="toScreen('x')">
<br>
<input type="button" value="3" id="keys" onclick="toScreen('3')">
<input type="button" value="2" id="keys" onclick="toScreen('2')">
<input type="button" value="1" id="keys" onclick="toScreen('1')">
<input type="button" value="/" id="keys" onclick="toScreen('/')">
<br>
<input type="button" value="0" id="keys" onclick="toScreen('0')">
<input type="button" value="." id="keys" onclick="toScreen('.')">
<input type="button" value="=" id="equal" onclick="equal()">
</form>
<h3>Javascript Calculator</h3>
</div>
<script type="text/javascript" src="script.js"></script>
</body>
</html>

I have attached the working code here. If you wish to just replace the text in input remove + from the function.
var display = document.getElementById('display');
function toScreen(x) {
display.value += x;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>calculator</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Javascript Calculator</h1>
<div id="calculator">
<form>
<input type="text" id="display" disabled>
<br>
<input type="button" value="C" id="keys" onclick="toScreen('c')">
<input type="button" value="CE" id="keys" onclick="clearEntry('c')">
<input type="button" value="x^2" id="keys" onclick="powerOf('c')">
<input type="button" value="+" id="keys" onclick="toScreen('+')">
<br>
<input type="button" value="9" id="keys" onclick='toScreen("9")'>
<input type="button" value="8" id="keys" onclick="toScreen('8')">
<input type="button" value="7" id="keys" onclick="toScreen('7')">
<input type="button" value="-" id="keys" onclick="toScreen('-')">
<br>
<input type="button" value="6" id="keys" onclick="toScreen('6')">
<input type="button" value="5" id="keys" onclick="toScreen('5')">
<input type="button" value="4" id="keys" onclick="toScreen('4')">
<input type="button" value="x" id="keys" onclick="toScreen('x')">
<br>
<input type="button" value="3" id="keys" onclick="toScreen('3')">
<input type="button" value="2" id="keys" onclick="toScreen('2')">
<input type="button" value="1" id="keys" onclick="toScreen('1')">
<input type="button" value="/" id="keys" onclick="toScreen('/')">
<br>
<input type="button" value="0" id="keys" onclick="toScreen('0')">
<input type="button" value="." id="keys" onclick="toScreen('.')">
<input type="button" value="=" id="equal" onclick="equal()">
</form>
<h3>Javascript Calculator</h3>
</div>
<script type="text/javascript" src="script.js"></script>
</body>
</html>

approch 1:
function toScreen(x) {
document.getElementById("display").value= x;
}
approach 2:
if you want to keep display outiside of the method then you have to keep whole code below( i.e before body end tag). As per you current code you are trying access the element before dom is getting loaded
var display = document.getElementById("display");
code :
var display = document.getElementById("display");
function toScreen(x) {
display.value =x;
}
</script>
</body>

Lets see the problem with the code
In following statement you are assigning the text object by finding element and it is fine.
var display = document.getElementById('display');
In following statement you are overriding text object with empty string, means there is not textbox object in display variable and here is the problem.
display ='';
What you need to do to clear text box content is
display.value='';
The textContent property sets or returns the text content of the specified node and not to play with text box value. You need to use value property instead.
so final code must be like below
var display = document.getElementById('display');
function toScreen(x) {
display.value ='';//Even this is not required because already over writing text in following statement
display.value = x;
}

Prevent an arithmetic operator from immediately following another one

I have written a calculator script which currently allows me to type invalid input values like 5*****5. Such inputs (where one arithmetic operator like *, + etc immediately follows another) should be restricted because they make no sense. How can I modify my code to restrict such inputs?
function c(val) {
var1 = $("#bar").val(val);
}
function v(val) {
var2 = $("#bar").val($("#bar").val() + val);
}
function equal() {
var3 = c(eval($("#bar").val()));
}
function reset() {
var4 = $("#bar").val("");
}
$(document).ready(function() {
$("#backspace").click(function() {
var barValue = $("#bar").val();
$("#bar").val(barValue.substring(0, barValue.length - 1));
});
});
<p>
<input type="text" id="bar" size="15" readonly>
<input type="button" value="C" onclick="reset('')">
</p>
<p>
<input type="button" value="←" id="backspace">
<input type="button" value="­" onclick="">
<input type="button" value="­" onclick="">
<input type="button" value="­" onclick="">
<input type="button" value="­" onclick="">
</p>
<p>
<input type="button" value="7" onclick="v('7')">
<input type="button" value="8" onclick="v('8')">
<input type="button" value="9" onclick="v('9')">
<input type="button" value="/" onclick="v('/')">
<input type="button" value="­" onclick="">
</p>
<p>
<input type="button" value="4" onclick="v('4')">
<input type="button" value="5" onclick="v('5')">
<input type="button" value="6" onclick="v('6')">
<input type="button" value="*" onclick="v('*')">
<input type="button" value="­" onclick="">
</p>
<p>
<input type="button" value="1" onclick="v('1')">
<input type="button" value="2" onclick="v('2')">
<input type="button" value="3" onclick="v('3')">
<input type="button" value="-" onclick="v('-')">
<input type="button" value="­" onclick="">
</p>
<p>
<input type="button" value="0" onclick="v('0')">
<input type="button" value="." onclick="v('.')">
<input type="button" value="+" onclick="v('+')">
<input type="button" value="=" onclick="equal()" id="equal">
<input type="button" value="­" onclick="">
</p>
<div id="history"></div>
Here is a JSFiddle Link to the full source.

Use regular expressions. Test to see if last value is +,-,*,or /
If the lastChar matches this criteria and so does the passed value do not do anything.
function v(val) {
var patt = /\+|\-|\*|\//
var barValue = $("#bar").val();
var lastChar = barValue.substring(barValue.length, barValue.length - 1);
if (patt.test(lastChar) && patt.test(val)) {
//do nothing as current val and lastChar are mathematical characters
} else {
//update the formula
var2 = $("#bar").val($("#bar").val() + val);
}
}