Develop Reference

How to prevent a calculator operator from modifying the result when multiple operators are pressed in a row? JavaScript

Creating a calculator with JavaScript, however if a user were to accidentally push an operator twice in a row, it would modify the result again based on the current values of a and b. This is primarily an issue if a user were to press the equal operator after entering an operation and then push another operator to add/subtract/etc. another number.
I am wondering if there is a way to prevent this from happening...the most logical thing I can think of would be if the operator button didn't modify the display or variables only when any two operator buttons are pressed twice in a row, though I have no idea how I would code that, and I would still need the operator to change the value of o.
Alternative solutions are welcome as well. FYI I am very new to programming so I may not understand complex solutions without a good amount of explanation.
JS code:
let clearBtn = document.getElementById('clearBtn');
let posNegBtn = document.getElementById('posNegBtn');
let divideBtn = document.getElementById('divideBtn');
let multiplyBtn = document.getElementById('multiplyBtn');
let subtractBtn = document.getElementById('subtractBtn');
let addBtn = document.getElementById('addBtn');
let equalBtn = document.getElementById('equalBtn');
let zero = document.getElementById('zero');
let decimalBtn = document.getElementById('decimalBtn');
let one = document.getElementById('one');
let two = document.getElementById('two');
let three = document.getElementById('three');
let four = document.getElementById('four');
let five = document.getElementById('five');
let six = document.getElementById('six');
let seven = document.getElementById('seven');
let eight = document.getElementById('eight');
let nine = document.getElementById('nine');
let display = document.getElementById('display');
let a = 0;
let b = 0;
let o = '-';
let currentNum;
let appendable = true;
clearBtn.addEventListener('click', clearDisplay);
posNegBtn.addEventListener('click', changePosNeg);
divideBtn.addEventListener('click', dividePressed);
multiplyBtn.addEventListener('click', multiplyPressed);
subtractBtn.addEventListener('click', subtractPressed);
addBtn.addEventListener('click', addPressed);
equalBtn.addEventListener('click', equalPressed);
zero.addEventListener('click', displayZero);
decimalBtn.addEventListener('click', displayDec);
one.addEventListener('click', display1);
two.addEventListener('click', display2);
three.addEventListener('click', display3);
four.addEventListener('click', display4);
five.addEventListener('click', display5);
six.addEventListener('click', display6);
seven.addEventListener('click', display7);
eight.addEventListener('click', display8);
nine.addEventListener('click', display9);
function clearDisplay() {
display.value = '0';
a = 0;
b = 0;
currentNum = display.value;
}
function displayZero() {
if (appendable === true) {
display.value += '0';
currentNum = display.value;
} else {
display.value = 0;
}
appendable = true;
}
function displayDec() {
if (appendable === true) {
if (display.value.includes('.')) {
display.value;
} else {
display.value += '.';
}
currentNum = display.value;
} else {
display.value = '0.';
appendable = true;
}
}
function changePosNeg() {
parseFloat(display.value *= -1);
currentNum = display.value;
}
function display1() {
if (display.value == '0' || appendable === false) {
display.value ='1';
} else {
display.value += '1';
}
currentNum = display.value;
appendable = true;
}
function display2() {
if (display.value == '0' || appendable === false) {
display.value ='2';
} else {
display.value += '2';
}
currentNum = display.value;
appendable = true;
}
function display3() {
if (display.value == '0' || appendable === false) {
display.value ='3';
} else {
display.value += '3';
}
currentNum = display.value;
appendable = true;
}
function display4() {
if (display.value == '0' || appendable === false) {
display.value ='4';
} else {
display.value += '4';
}
currentNum = display.value;
appendable = true;
}
function display5() {
if (display.value == '0' || appendable === false) {
display.value ='5';
} else {
display.value += '5';
}
currentNum = display.value;
appendable = true;
}
function display6() {
if (display.value == '0' || appendable === false) {
display.value = '6';
} else {
display.value += '6';
}
currentNum = display.value;
appendable = true;
}
function display7() {
if (display.value == '0' || appendable === false) {
display.value = '7';
} else {
display.value += '7';
}
currentNum = display.value;
appendable = true;
}
function display8() {
if (display.value == '0' || appendable === false) {
display.value = '8';
} else {
display.value += '8';
}
currentNum = display.value;
appendable = true;
}
function display9() {
if (display.value == '0' || appendable === false) {
display.value = '9';
} else {
display.value += '9';
}
currentNum = display.value;
appendable = true;
}
function addPressed() {
if (a !== 0) {
b = parseFloat(`${currentNum}`)
operate();
} else {
a = parseFloat(`${currentNum}`);
}
o = '+';
appendable = false;
}
function subtractPressed() {
if (a !== 0) {
b = parseFloat(`${currentNum}`)
operate();
} else {
a = parseFloat(`${currentNum}`);
}
o = '-';
appendable = false;
}
function multiplyPressed() {
if (a !== 0) {
b = parseFloat(`${currentNum}`)
operate();
} else {
a = parseFloat(`${currentNum}`);
}
o = '*';
appendable = false;
}
function dividePressed() {
if (a !== 0) {
b = parseFloat(`${currentNum}`)
operate();
} else {
a = parseFloat(`${currentNum}`);
}
o = '/';
appendable = false;
}
function equalPressed() {
b = parseFloat(`${currentNum}`);
operate();
}
function add() {
display.value = a + b;
a = parseFloat(`${display.value}`);
appendable = false;
}
function subtract() {
result =
display.value = a - b;
a = parseFloat(`${display.value}`);
appendable = false;
}
function multiply() {
display.value = a * b;
a = parseFloat(`${display.value}`);
appendable = false;
}
function divide() {
display.value = a / b;
a = parseFloat(`${display.value}`);
appendable = false;
}
function operate() {
if (o == '-') {
return subtract();
} else if (o == '+') {
return add();
} else if (o == '*') {
return multiply();
} else if (o == '/') {
return divide();
}
}
HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Calculator</title>
<link rel="stylesheet" href="style.css">
<script src="script.js" defer></script>
</head>
<body>
<div class="container">
<div id="calculator">
<input id="display" type="text" value="0">
<div id="buttons">
<div id="mainBtns">
<div id="otherBtns">
<button id="clearBtn">AC</button>
<button id="posNegBtn">+/-</button>
</div>
<div id="numBtns">
<button id="seven">7</button>
<button id="eight">8</button>
<button id="nine">9</button>
<button id="four">4</button>
<button id="five">5</button>
<button id="six">6</button>
<button id="one">1</button>
<button id="two">2</button>
<button id="three">3</button>
<button id="zero">0</button>
<button id="decimalBtn">.</button>
</div>
</div>
<div id="operators">
<button id="divideBtn">/</button>
<button id="multiplyBtn">x</button>
<button id="subtractBtn">-</button>
<button id="addBtn">+</button>
<button id="equalBtn">=</button>
</div>
</div>
</div>
</div>
</body>
</html>
CSS code:
.container {
display: flex;
flex-direction: column;
}
#calculator {
display: flex;
flex-direction: column;
width: 200px;
height: 330px;
border: 15px solid black;
background-color: black;
gap: 20px;
}
#display {
background-color: gray;
height: 60px;
text-align: right;
font-size: 50px;
}
#buttons {
display: flex;
flex-direction: row;
gap: 10px;
align-items: center;
}
#operators {
display: flex;
flex-direction: column;
gap: 10px;
}
#divideBtn, #multiplyBtn, #subtractBtn, #addBtn, #equalBtn {
width: 40px;
height: 40px;
background-color: chartreuse;
}
#mainBtns {
display: flex;
flex-direction: column;
gap: 10px;
}
#numBtns {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;
gap: 10px 10px;
}
#otherBtns {
display: flex;
gap: 10px;
justify-content: space-around;
}
#nine, #eight, #seven, #six, #five, #four, #three, #two, #one,
#decimalBtn, #posNegBtn {
width: 40px;
height: 40px;
}
#zero, #clearBtn {
width: 93px;
}
#clearBtn, #posNegBtn {
background-color: aqua;
}

Store a variable that is a reference to the last button pressed, then in your operate function call a function that checks if the last button pressed is an operator and if it is then return early before the operation takes place.
like this:
let lastButtonPressed;
function anyOfYourOperatorFunctions() {
if (lastButtonPressedIsOperator(lastButtonPressed))
return null;
else {
...
}
}
function lastButtonPressedIsOperator(lastButton) {
...
return true;
}
function operate() {
if (lastButtonPressedIsOperator(lastButtonPressed))
return null;
if (o == '-') {
return subtract();
} else if (o == '+') {
return add();
} else if (o == '*') {
return multiply();
} else if (o == '/') {
return divide();
}
}

Operator function defaults to first if statement in JavaScript calculator project [closed]

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 9 months ago.
Improve this question
I'm creating a calculator with JavaScript and most functions are working properly, but the operator function defaults to the first if statement each time (I switched add with subtract to test this). i.e. if the add function is in the first if statement of my operator function, every operator button will add the numbers instead of subtract, multiply, etc.
I tried defining o, which didn't make a difference. I tried removing the parameters, hoping that it would pull the value of o from the previous functions, which also didn't make a difference. I have o declared globally, so I thought it would pull the latest value of o like it does with my a and b variables. I'm not quite sure what is causing the issue, just that for whatever reason it's not making it through my if/else statements the way I intended...maybe it's not reading the value of o correctly?
Note: I'm positive there is a much more concise way to code this, but I'm really new to programming and just getting it to work will be great.
JS code:
let clearBtn = document.getElementById('clearBtn');
let posNegBtn = document.getElementById('posNegBtn');
let divideBtn = document.getElementById('divideBtn');
let multiplyBtn = document.getElementById('multiplyBtn');
let subtractBtn = document.getElementById('subtractBtn');
let addBtn = document.getElementById('addBtn');
let equalBtn = document.getElementById('equalBtn');
let zero = document.getElementById('zero');
let decimalBtn = document.getElementById('decimalBtn');
let one = document.getElementById('one');
let two = document.getElementById('two');
let three = document.getElementById('three');
let four = document.getElementById('four');
let five = document.getElementById('five');
let six = document.getElementById('six');
let seven = document.getElementById('seven');
let eight = document.getElementById('eight');
let nine = document.getElementById('nine');
let display = document.getElementById('display');
let a = 0;
let b = 0;
let o;
let currentNum;
clearBtn.addEventListener('click', clearDisplay);
posNegBtn.addEventListener('click', changePosNeg);
divideBtn.addEventListener('click', dividePressed);
multiplyBtn.addEventListener('click', multiplyPressed);
subtractBtn.addEventListener('click', subtractPressed);
addBtn.addEventListener('click', addPressed);
equalBtn.addEventListener('click', equalPressed);
zero.addEventListener('click', displayZero);
decimalBtn.addEventListener('click', displayDec);
one.addEventListener('click', display1);
two.addEventListener('click', display2);
three.addEventListener('click', display3);
four.addEventListener('click', display4);
five.addEventListener('click', display5);
six.addEventListener('click', display6);
seven.addEventListener('click', display7);
eight.addEventListener('click', display8);
nine.addEventListener('click', display9);
function clearDisplay() {
display.value = '0';
currentNum = display.value;
}
function displayZero() {
display.value += '0';
currentNum = display.value;
}
function displayDec() {
if (display.value.includes('.')) {
display.value;
} else {
display.value += '.';
}
currentNum = display.value;
}
function changePosNeg() {
parseFloat(display.value *= -1);
currentNum = display.value;
}
function display1() {
if (display.value == '0') {
display.value ='1';
} else {
display.value += '1';
}
currentNum = display.value;
}
function display2() {
if (display.value == '0') {
display.value ='2';
} else {
display.value += '2';
}
currentNum = display.value;
}
function display3() {
if (display.value == '0') {
display.value ='3';
} else {
display.value += '3';
}
currentNum = display.value;
}
function display4() {
if (display.value == '0') {
display.value ='4';
} else {
display.value += '4';
}
currentNum = display.value;
}
function display5() {
if (display.value == '0') {
display.value ='5';
} else {
display.value += '5';
}
currentNum = display.value;
}
function display6() {
if (display.value == '0') {
display.value = '6';
} else {
display.value += '6';
}
currentNum = display.value;
}
function display7() {
if (display.value == '0') {
display.value = '7';
} else {
display.value += '7';
}
currentNum = display.value;
}
function display8() {
if (display.value == '0') {
display.value = '8';
} else {
display.value += '8';
}
currentNum = display.value;
}
function display9() {
if (display.value == '0') {
display.value = '9';
} else {
display.value += '9';
}
currentNum = display.value;
}
function addPressed() {
display.value = '';
a = parseFloat(`${currentNum}`);
o = '+';
}
function subtractPressed() {
display.value = '';
a = parseFloat(`${currentNum}`);
o = '-';
}
function multiplyPressed() {
o = 'x';
display.value = '';
a = parseFloat(`${currentNum}`);
}
function dividePressed() {
o = '/';
display.value = '';
a = parseFloat(`${currentNum}`);
}
function equalPressed() {
b = parseFloat(`${currentNum}`);
operate(o, a, b);
}
function add(a, b) {
display.value = a + b;
currentNum = display.value;
}
function subtract(a, b) {
display.value = a - b;
currentNum = display.value;
}
function multiply(a, b) {
display.value = a * b;
currentNum = display.value;
}
function divide(a, b) {
display.value = a / b;
currentNum = display.value;
}
function operate(o, a, b) {
if (o = '-') {
return subtract(a, b);
} else if (o = '+') {
return add(a, b);
} else if (o = '*') {
return multiply(a, b);
} else if (o = '/') {
return divide(a, b);
}
}
HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Calculator</title>
<link rel="stylesheet" href="style.css">
<script src="script.js" defer></script>
</head>
<body>
<div class="container">
<div id="calculator">
<input id="display" type="text" value="0">
<div id="buttons">
<div id="mainBtns">
<div id="otherBtns">
<button id="clearBtn">AC</button>
<button id="posNegBtn">+/-</button>
</div>
<div id="numBtns">
<button id="seven">7</button>
<button id="eight">8</button>
<button id="nine">9</button>
<button id="four">4</button>
<button id="five">5</button>
<button id="six">6</button>
<button id="one">1</button>
<button id="two">2</button>
<button id="three">3</button>
<button id="zero">0</button>
<button id="decimalBtn">.</button>
</div>
</div>
<div id="operators">
<button id="divideBtn">/</button>
<button id="multiplyBtn">x</button>
<button id="subtractBtn">-</button>
<button id="addBtn">+</button>
<button id="equalBtn">=</button>
</div>
</div>
</div>
</div>
</body>
</html>
CSS code:
.container {
display: flex;
flex-direction: column;
}
#calculator {
display: flex;
flex-direction: column;
width: 200px;
height: 330px;
border: 15px solid black;
background-color: black;
gap: 20px;
}
#display {
background-color: gray;
height: 60px;
text-align: right;
font-size: 50px;
}
#buttons {
display: flex;
flex-direction: row;
gap: 10px;
align-items: center;
}
#operators {
display: flex;
flex-direction: column;
gap: 10px;
}
#divideBtn, #multiplyBtn, #subtractBtn, #addBtn, #equalBtn {
width: 40px;
height: 40px;
background-color: chartreuse;
}
#mainBtns {
display: flex;
flex-direction: column;
gap: 10px;
}
#numBtns {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;
gap: 10px 10px;
}
#otherBtns {
display: flex;
gap: 10px;
justify-content: space-around;
}
#nine, #eight, #seven, #six, #five, #four, #three, #two, #one,
#decimalBtn, #posNegBtn {
width: 40px;
height: 40px;
}
#zero, #clearBtn {
width: 93px;
}
#clearBtn, #posNegBtn {
background-color: aqua;
}

It should be
if (o == '-'){}
What you're doing now should be giving you an error.
=
is for assignment
==
is to check if something is equal to something else
===
is to check if something is strictly equal, meaning
null == false
comes out to true
null === false
comes out to false

How to stop loop from executing again after it has already finished iterating?

I'm trying to build a calculator, and I used objects to store both the operator and the numbers put into the calculator. And then the loop in the evaluateOperation function takes the operator in the object along with the first value 'result' value and the second value and operates these values using the operate function.
The issue is, as soon as the loop is complete and exits, it loops again before exiting finally. Details can be found below, detailed comments on each part of the code.
const number_buttons = document.querySelectorAll('.number');
const input = document.getElementById('calc_display');
const op = document.querySelectorAll('.operator');
const multiplication = document.querySelector('#multiply');
const division = document.querySelector('#divide');
const addition = document.querySelector('#add');
const subtraction = document.querySelector('#subtract');
const evaluate = document.querySelector('#evaluate');
const decimal = document.querySelector('#decimal button');
const clearAllData = document.querySelector('.clear button')
//number storage
let num_display = {
result: 0,
};
let operatorStorage = {};
let count = 0;
let operatorSequence = 0;
let iterable_for_post_result = 1;
let iterable_for_result = 0;
let operatorType;
let operationResult = 0;
let clicked = 1;
let decimalClicks = 0;
let called = 1;
//performs operation
function operate(operator, num1, num2) {
switch (operator) {
case '+':
console.log(Number((add(num1, num2)).toFixed(2)));
return Number((add(num1, num2)).toFixed(2));
break;
case '-':
console.log(Number((subtract(num1, num2)).toFixed(2)));
return Number((subtract(num1, num2)).toFixed(2));
break;
case '*':
console.log(Number((multiply(num1, num2)).toFixed(2)));
return Number((multiply(num1, num2)).toFixed(2));
break;
case '/':
console.log(Number((divide(num1, num2)).toFixed(2)));
return Number((divide(num1, num2)).toFixed(2));
break;
}
}
// When numbers are clicked eventlistener
number_buttons.forEach(el => {
el.addEventListener('click', () => {
if (el.textContent == '.') {
console.log('deci');
if (decimalClicks == 1) {
el.disabled = true;
decimalClicks--;
} else {
decimalClicks++;
el.disabled = false;
input.value += el.textContent;
if (count == 0) {
// When an operation is called before a number is entered result becomes 0.
num_display.result = Number(input.value);
} else if (count >= 1) {
num_display[`post_op_result ${count}`] = Number(input.value);
}
}
} else {
input.value += el.textContent;
if (count == 0) {
num_display.result = Number(input.value);
} else if (count >= 1) {
num_display[`post_op_result ${count}`] = Number(input.value);
}
console.log(num_display);
}
});
});
// Eventlistener when the '=' is clicked
//
evaluate.addEventListener('click', () => {
iterable_for_result;
iterable_for_post_result;
// Condition for if user does not click an operator
if (operatorType == undefined || isNaN(operatorType) == true && Object.keys(num_display).length == 1) {
return;
} else {
// Condition for if user does not input the first number
if (input.value == '') {
// if a user inputted the first number but did not enter an operator
if (operatorType == undefined || isNaN(operatorType) == true) {
operatorType = '+';
}
input.value = `${num_display['result']}`;
operationResult = Number(input.value);
console.log(operationResult);
return operationResult;
} else {
let errorMessage = evaluateOperation(iterable_for_result, iterable_for_post_result);
// if divide number by 0
if (errorMessage == Infinity) {
console.log('Bwana');
errorMessage = 'YERRRRR';
input.value = `${errorMessage}`;
errorMessage = 0;
operationResult = Number(input.value);
num_display['result'] = operationResult;
} else {
//If no problems with inputs, calculates and calls evaluateOperation function
input.value = `${evaluateOperation(iterable_for_result, iterable_for_post_result)}`;
//operationResult = Number(input.value);
//num_display['result'] = operationResult;
}
}
}
iterable_for_post_result++;
iterable_for_result++;
console.log(num_display);
});
// operator click event listener
op.forEach(btn => {
btn.addEventListener('click', () => {
console.log(operatorType);
if (clicked > 1) {
clicked -= 2;
count++;
clear();
} else if (clicked <= 1) {
count++;
decimal.disabled = false;
decimalClicks = 0;
clicked++;
clear();
}
})
});
//Stores the operator clicked into operator object
function operatorTypeFunction(operator) {
operatorSequence++;
operatorStorage[`Operator ${operatorSequence}`] = operator;
operatorType = operatorStorage[`Operator ${operatorSequence}`];
console.log(operatorStorage);
}
// clears only the inputted value
function clear() {
input.value = "";
}
function add(num1, num2) {
return num1 + num2;
}
function subtract(num1, num2) {
return num1 - num2;
}
function multiply(num1, num2) {
return num1 * num2;
}
function divide(num1, num2) {
return num1 / num2;
}
// second inputted value
function storedKeys(i) {
return num_display[Object.keys(num_display)[i]];
}
// first inputted value/ also stored as the final result of every operation performed
// i.e. firstvalue = 10; secondvalue = 12;
// newvalue = firstvalue + secondvalue;
// Make firstvalue = 0 and then...
// firstvalue += newvalue
function resultNum1(i) {
if (operationResult == 0 && Object.keys(num_display).length <= 2) {
console.log('result ' + num_display[Object.keys(num_display)[i]]);
return num_display[Object.keys(num_display)[i]];
} else {
if (isNaN(operationResult) == true) {
operationResult = 0;
return operationResult;
} else {
return num_display['result'];
}
}
}
function evaluateOperation(iterable_variable_1, iterable_variable_2) {
let postResultIterable = 0;
let resultNumIterable = -1;
if (Object.keys(num_display).length > 2) {
console.log('Run');
// Something wrong with iteration, it loops through everything when all numbers are calculated
// it does another full loop with the new calculation after exiting the loop
for (let i = 1; i <= Object.keys(operatorStorage).length; i++) {
// The logging are to help to see the result and what is being used in the operate func
console.log(i);
resultNumIterable++;
postResultIterable++;
console.log(operatorStorage[`Operator ${i}`]);
console.log(storedKeys(postResultIterable));
operationResult = operate(operatorStorage[`Operator ${i}`], resultNum1(resultNumIterable), storedKeys(postResultIterable));
num_display['result'] = 0;
num_display['result'] += operationResult;
}
return num_display['result'];
} else {
return operate(operatorType, resultNum1(iterable_variable_1), storedKeys(iterable_variable_2));
}
}
//Clears all data stored and the input
clearAllData.addEventListener('click', () => {
for (let key in num_display) {
for (let i = count; i >= 0; i--) {
num_display['result'] = 0;
delete num_display[`post_op_result ${i}`];
delete operatorStorage[`Operator ${i}`];
}
}
clear();
operationResult = 0;
count = 0;
clicked = 1;
decimalClicks = 0;
iterable_for_post_result = 1;
iterable_for_result = 0;
operatorSequence = 0;
});
body {
display: flex;
justify-content: center;
align-items: center;
height: 80vh;
}
.grid_buttons {
width: 200px;
height: 200px;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(5, 1fr);
justify-content: center;
border: 1px solid black;
}
#calc_display {
grid-column: 1/4;
outline: none;
border: none;
border-bottom: 1px solid black;
}
#calc_display:hover {
outline: none;
}
.equal {
grid-column: 2/4;
}
.grid_buttons div>* {
width: 100%;
}
button {
padding: 5px;
font-size: 0.8em;
background-color: white;
border: none;
}
button:hover {
background-color: rgb(53, 157, 223);
color: white;
cursor: pointer;
}
.equal button {
background-color: rgb(53, 157, 223);
color: white;
}
<div class="grid_buttons">
<input type="text" id="calc_display" value="" readonly>
<div id="decimal"><button class="number">.</button></div>
<div><button class="operator" id="multiply" onclick="operatorTypeFunction('*');">*</button></div>
<div><button class="operator" id="divide" onclick="operatorTypeFunction('/')">/</button></div>
<div><button class="operator" id="add" onclick="operatorTypeFunction('+')">+</button></div>
<div><button class="operator" id="subtract" onclick="operatorTypeFunction('-')">-</button></div>
<div class="clear"><button>AC</button></div>
<div id="7"><button class="number">7</button></div>
<div id="8"><button class="number">8</button></div>
<div id="9"><button class="number">9</button></div>
<div id="4"><button class="number">4</button></div>
<div id="5"><button class="number">5</button></div>
<div id="6"><button class="number">6</button></div>
<div id="1"><button class="number">1</button></div>
<div id="2"><button class="number">2</button></div>
<div id="3"><button class="number">3</button></div>
<div id="0"><button class="number">0</button></div>
<div class="equal"><button id="evaluate">=</button></div>
</div>

It's not looping twice, you're calling evaluateOperation() twice. First in
let errorMessage = evaluateOperation(iterable_for_result, iterable_for_post_result);
and again in
input.value = `${evaluateOperation(iterable_for_result, iterable_for_post_result)}`;
Instead of calling it again, just use the value you assigned from the first call:
input.value = error_message;

How to fix an issue in my javascript slider range?

Hi I'm trying to fix an issue in my JavaScript and unfortunately I'm a little stuck on where I'm going wrong here.
I'm designing a slider where the sliders thumb changes to a different range which is currently 1 - 5. The issue is that I cannot seem to get the emojis to appear as they should when the slider changes.
Here is what I'm working with:
var slider = document.getElementById('myRange')
function onChange(event) {
var x = event.target.value
if (x <= 3) {
slider.className = ''
} else if (x > 3 && x <= 6) {
slider.className = 'MyClass-1'
} else if (x > 6) {
slider.className = 'MyClass-2'
} else if (x > 6) {
slider.className = 'MyClass-3'
}
}
input[type=range] {
-webkit-appearance: none;
height: 20px;
width: 200px;
max-width: 100%;
margin: 25px auto;
background: #08121c;
border: 3px solid #08121c;
border-radius: 100px;
display: block;
}
input[type=range]:focus {
outline: none;
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
border: none;
height: 35px;
width: 35px;
border-radius: 100%;
background-color: transparent;
background-image: url(http://d1cxtglzz1rb2m.cloudfront.net/emoji/SVG/18-slightly-smiling-face.svg);
background-position: center center;
background-repeat: no-repeat;
background-size: 100%;
}
input[type="range"].MyClass-1::-webkit-slider-thumb {
background-image: url(http://d1cxtglzz1rb2m.cloudfront.net/emoji/SVG/06-grinning-face-with-smiling-eyes.svg);
}
input[type="range"].MyClass-2::-webkit-slider-thumb {
background-image: url(http://d1cxtglzz1rb2m.cloudfront.net/emoji/SVG/12-smiling-face-with-sunglasses.svg);
}
input[type="range"].MyClass-3::-webkit-slider-thumb {
background-image: url(http://d1cxtglzz1rb2m.cloudfront.net/emoji/SVG/13-smiling-face-with-heart-eyes.svg);
}
<div class="slider-bar">
<input type="range" id="myRange" min="1" max="5" value="1" />
</div>

What is going on with this function?:
function onChange(event) {
var x = event.target.value
if (x <= 3) {
slider.className = ''
} else if (x > 3 && x <= 6) {
slider.className = 'MyClass-1'
} else if (x > 6) {
slider.className = 'MyClass-2'
} else if (x > 6) {
slider.className = 'MyClass-3'
}
}
The last else if will never execute.
EDIT: If x is the integer that is the same number you want to match the class, you can simply replace all the code above with
slider.className = `MyClass-${x}`;

replace you JS script with this code and it should work.
however you do need to fix your if statement
var slider = document.getElementById("myRange");
slider.addEventListener('mouseup', function(event) {
var x = event.target.value
console.log(x)
if (x <= 3) {
slider.className = ''
} else if (x > 3 && x <= 4) {
slider.className = 'MyClass-1'
} else if (x > 4) {
slider.className = 'MyClass-2'
} else if (x > 5) {
slider.className = 'MyClass-3'
}
})

Your JS onchange event is not wired to anything. Try this
var slider = document.getElementById('myRange')
slider.onchange = function(event) {
var x = event.target.value
if (x <= 3) {
slider.className = ''
} else if (x > 3 && x <= 6) {
slider.className = 'MyClass-1'
} else if (x > 6) {
slider.className = 'MyClass-2'
} else if (x > 6) {
slider.className = 'MyClass-3'
}
JSFiddle
Your conditional statements need some work though, as they will not all be executed. Perhaps something like this:
slider.onchange = function(event) {
var x = event.target.value
if (x <= 3) {
slider.className = ''
} else if (x > 3 && x <= 4) {
slider.className = 'MyClass-1'
} else if (x > 4) {
slider.className = 'MyClass-2'
} else if (x > 5) {
slider.className = 'MyClass-3'
}
}

Uncaught TypeError: firstArray.join is not a function

I'm new to coding and javascript in general. I've been trying to make a calculator to get myself more familiar with the language, and just for fun. I'm running into a problem, I can type my numbers in and use all my math operators just fine. What ever result you get will be made equal to my firstArray so that the user can add,subtract,multiply,divide with the last number they have on screen. I get the error that in the title, and I don't get what not working and why.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Template</title>
<style>
h1 {
color: salmon;
text-align: center;
border-bottom: solid;
background-color: white;
}
body {
background-color: rgb(0, 209, 243);
}
#zero {
position: relative;
left: 0px;
}
#clear {
position: relative;
left: 0px;
}
#keypad {
background-color: salmon;
text-align: center;
width: 100px;
margin: auto;
}
#results {
background-color: white;
text-align: left;
padding: 2px;
width: 96px;
margin: auto;
height: 20px;
}
#calculator {
border: solid gray 4px;
width: 100px;
margin: auto;
}
#screen_1 {
text-align: left;
margin: auto;
overflow-Y: hidden;
overflow-X: hidden;
text-overflow: hidden;
}
#math {
width: 100px;
margin: auto;
background-color: gray;
}
</style>
</head>
<body>
<h1>Number!</h1>
<div id="calculator">
<div id="results">
<p id="screen_1"></p>
</div>
<div id="keypad">
<button id="one" class="button">1</button>
<button id="two" class="button">2</button>
<button id="three" class="button">3</button>
<br>
<button id="four" class="button">4</button>
<button id="five" class="button">5</button>
<button id="six" class="button">6</button>
<br>
<button id="seven" class="button">7</button>
<button id="eight" class="button">8</button>
<button id="nine" class="button">9</button>
<br>
<button id="clear" class="button">C</button>
<button id="zero" class="button">0</button>
<button id="equal" class="button">=</button>
</div>
<div id="math">
<button id="plus" class="button">+</button>
<button id="minus" class="button">-</button>
<button id="multiply" class="button">*</button>
<button id="divide" class="button">/</button>
</div>
</div>
<script>
var firstArray = new Array;
var secondArray = new Array;
var next = false;
var plusBoolean = false;
var minusBoolean = false;
var multiBoolean = false;
var divideBoolean = false;
var x = document.getElementById("screen_1");
document.getElementById("one").addEventListener("click", function() {
if (next == false) {
firstArray.push("1");
x.innerHTML = firstArray.join("");
} else if (next == true) {
secondArray.push("1");
x.innerHTML = secondArray.join("");
}
})
document.getElementById("two").addEventListener("click", function() {
if (next == false) {
firstArray.push("2");
x.innerHTML = firstArray.join("");
} else if (next == true) {
secondArray.push("2");
x.innerHTML = secondArray.join("");
}
})
document.getElementById("three").addEventListener("click", function() {
if (next == false) {
firstArray.push("3");
x.innerHTML = firstArray.join("");
} else if (next == true) {
secondArray.push("3");
x.innerHTML = secondArray.join("");
}
})
document.getElementById("four").addEventListener("click", function() {
if (next == false) {
firstArray.push("4");
x.innerHTML = firstArray.join("");
} else if (next == true) {
secondArray.push("4");
x.innerHTML = secondArray.join("");
}
})
document.getElementById("five").addEventListener("click", function() {
if (next == false) {
firstArray.push("5");
x.innerHTML = firstArray.join("");
} else if (next == true) {
secondArray.push("5");
x.innerHTML = secondArray.join("");
}
})
document.getElementById("six").addEventListener("click", function() {
if (next == false) {
firstArray.push("6");
x.innerHTML = firstArray.join("");
} else if (next == true) {
secondArray.push("6");
x.innerHTML = secondArray.join("");
}
})
document.getElementById("seven").addEventListener("click", function() {
if (next == false) {
firstArray.push("7");
x.innerHTML = firstArray.join("");
} else if (next == true) {
secondArray.push("7");
x.innerHTML = secondArray.join("");
}
})
document.getElementById("eight").addEventListener("click", function() {
if (next == false) {
firstArray.push("8");
x.innerHTML = firstArray.join("");
} else if (next == true) {
secondArray.push("8");
x.innerHTML = secondArray.join("");
}
})
document.getElementById("nine").addEventListener("click", function() {
if (next == false) {
firstArray.push("9");
x.innerHTML = firstArray.join("");
} else if (next == true) {
secondArray.push("9");
x.innerHTML = secondArray.join("");
}
})
document.getElementById("zero").addEventListener("click", function() {
if (next == false) {
firstArray.push("0");
x.innerHTML = firstArray.join("");
} else if (next == true) {
secondArray.push("0");
x.innerHTML = secondArray.join("");
}
})
document.getElementById("plus").addEventListener("click", function() {
next = true;
plusBoolean = true;
x.innerHTML = "";
})
document.getElementById("minus").addEventListener("click", function() {
next = true;
minusBoolean = true;
x.innerHTML = "";
})
document.getElementById("multiply").addEventListener("click", function() {
next = true;
multiBoolean = true;
x.innerHTML = "";
})
document.getElementById("divide").addEventListener("click", function() {
next = true;
divideBoolean = true;
x.innerHTML = "";
})
document.getElementById("equal").addEventListener("click", function() {
if (plusBoolean == true) {
firstArray = Number(firstArray.join("")) + Number(secondArray.join(""));
x.innerHTML = firstArray;
secondArray = [];
console.log(firstArray);
} else if (minusBoolean == true) {
firstArray = Number(firstArray.join("")) - Number(secondArray.join(""));
x.innerHTML = firstArray;
secondArray = [];
console.log(firstArray);
} else if (multiBoolean == true) {
firstArray = Number(firstArray.join("")) * Number(secondArray.join(""));
x.innerHTML = firstArray;
secondArray = [];
console.log(firstArray);
} else if (divideBoolean == true) {
firstArray = Number(firstArray.join("")) / Number(secondArray.join(""));
x.innerHTML = firstArray;
secondArray = [];
console.log(firstArray);
}
})
document.getElementById("clear").addEventListener("click", function() {
firstArray = [];
secondArray = [];
next = false;
plusBoolean = false;
minusBoolean = false;
multiBoolean = false;
divideBoolean = false;
x.innerHTML = "";
})
</script>
</body>
</html>

Once you join an array, you cannot push to it again. Joining an array in your case, turns it into a string.

Made some changes inside equal click listener.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Template</title>
<style>
h1 {
color: salmon;
text-align: center;
border-bottom: solid;
background-color: white;
}
body {
background-color: rgb(0, 209, 243);
}
#zero {
position: relative;
left: 0px;
}
#clear {
position: relative;
left: 0px;
}
#keypad {
background-color: salmon;
text-align: center;
width: 100px;
margin: auto;
}
#results {
background-color: white;
text-align: left;
padding: 2px;
width: 96px;
margin: auto;
height: 20px;
}
#calculator {
border: solid gray 4px;
width: 100px;
margin: auto;
}
#screen_1 {
text-align: left;
margin: auto;
overflow-Y: hidden;
overflow-X: hidden;
text-overflow: hidden;
}
#math {
width: 100px;
margin: auto;
background-color: gray;
}
</style>
</head>
<body>
<h1>Number!</h1>
<div id="calculator">
<div id="results">
<p id="screen_1"></p>
</div>
<div id="keypad">
<button id="one" class="button">1</button>
<button id="two" class="button">2</button>
<button id="three" class="button">3</button>
<br>
<button id="four" class="button">4</button>
<button id="five" class="button">5</button>
<button id="six" class="button">6</button>
<br>
<button id="seven" class="button">7</button>
<button id="eight" class="button">8</button>
<button id="nine" class="button">9</button>
<br>
<button id="clear" class="button">C</button>
<button id="zero" class="button">0</button>
<button id="equal" class="button">=</button>
</div>
<div id="math">
<button id="plus" class="button">+</button>
<button id="minus" class="button">-</button>
<button id="multiply" class="button">*</button>
<button id="divide" class="button">/</button>
</div>
</div>
<script>
var firstArray = new Array;
var secondArray = new Array;
var next = false;
var plusBoolean = false;
var minusBoolean = false;
var multiBoolean = false;
var divideBoolean = false;
var x = document.getElementById("screen_1");
document.getElementById("one").addEventListener("click", function() {
if (next == false) {
firstArray.push("1");
x.innerHTML = firstArray.join("");
} else if (next == true) {
secondArray.push("1");
x.innerHTML = secondArray.join("");
}
})
document.getElementById("two").addEventListener("click", function() {
if (next == false) {
firstArray.push("2");
x.innerHTML = firstArray.join("");
} else if (next == true) {
secondArray.push("2");
x.innerHTML = secondArray.join("");
}
})
document.getElementById("three").addEventListener("click", function() {
if (next == false) {
firstArray.push("3");
x.innerHTML = firstArray.join("");
} else if (next == true) {
secondArray.push("3");
x.innerHTML = secondArray.join("");
}
})
document.getElementById("four").addEventListener("click", function() {
if (next == false) {
firstArray.push("4");
x.innerHTML = firstArray.join("");
} else if (next == true) {
secondArray.push("4");
x.innerHTML = secondArray.join("");
}
})
document.getElementById("five").addEventListener("click", function() {
if (next == false) {
firstArray.push("5");
x.innerHTML = firstArray.join("");
} else if (next == true) {
secondArray.push("5");
x.innerHTML = secondArray.join("");
}
})
document.getElementById("six").addEventListener("click", function() {
if (next == false) {
firstArray.push("6");
x.innerHTML = firstArray.join("");
} else if (next == true) {
secondArray.push("6");
x.innerHTML = secondArray.join("");
}
})
document.getElementById("seven").addEventListener("click", function() {
if (next == false) {
firstArray.push("7");
x.innerHTML = firstArray.join("");
} else if (next == true) {
secondArray.push("7");
x.innerHTML = secondArray.join("");
}
})
document.getElementById("eight").addEventListener("click", function() {
if (next == false) {
firstArray.push("8");
x.innerHTML = firstArray.join("");
} else if (next == true) {
secondArray.push("8");
x.innerHTML = secondArray.join("");
}
})
document.getElementById("nine").addEventListener("click", function() {
if (next == false) {
firstArray.push("9");
x.innerHTML = firstArray.join("");
} else if (next == true) {
secondArray.push("9");
x.innerHTML = secondArray.join("");
}
})
document.getElementById("zero").addEventListener("click", function() {
if (next == false) {
firstArray.push("0");
x.innerHTML = firstArray.join("");
} else if (next == true) {
secondArray.push("0");
x.innerHTML = secondArray.join("");
}
})
document.getElementById("plus").addEventListener("click", function() {
next = true;
plusBoolean = true;
x.innerHTML = "";
})
document.getElementById("minus").addEventListener("click", function() {
next = true;
minusBoolean = true;
x.innerHTML = "";
})
document.getElementById("multiply").addEventListener("click", function() {
next = true;
multiBoolean = true;
x.innerHTML = "";
})
document.getElementById("divide").addEventListener("click", function() {
next = true;
divideBoolean = true;
x.innerHTML = "";
})
document.getElementById("equal").addEventListener("click", function() {
if (plusBoolean == true) {
firstArray = [Number(firstArray.join("")) + Number(secondArray.join(""))];
x.innerHTML = firstArray[0];
secondArray = [];
console.log(firstArray[0]);
} else if (minusBoolean == true) {
firstArray = [Number(firstArray.join("")) - Number(secondArray.join(""))];
x.innerHTML = firstArray[0];
secondArray = [];
console.log(firstArray[0]);
} else if (multiBoolean == true) {
firstArray = [Number(firstArray.join("")) * Number(secondArray.join(""))];
x.innerHTML = firstArray[0];
secondArray = [];
console.log(firstArray[0]);
} else if (divideBoolean == true) {
firstArray = [Number(firstArray.join("")) / Number(secondArray.join(""))];
x.innerHTML = firstArray[0];
secondArray = [];
console.log(firstArray[0]);
}
})
document.getElementById("clear").addEventListener("click", function() {
firstArray = [];
secondArray = [];
next = false;
plusBoolean = false;
minusBoolean = false;
multiBoolean = false;
divideBoolean = false;
x.innerHTML = "";
})
</script>
</body>
</html>