ARTICLE AD BOX
In my function operate I am using an if...else statement which does math operation based on the operation input. The problem is when i type in "25+5" and then "-" i should get "30-" but i get "20-" which means it counts clicked button as operation to choose between 2 numbers rather than operation that is already in the string.
Commented out code works perfectly but as i understood by some suggestions i should not be using input.value in the argument of if...else statement
"use strict";
const numberEl = document.querySelectorAll(".number");
const operatorEl = document.querySelectorAll(".operator");
const clearEl = document.querySelector(".clear");
const sumEl = document.querySelector(".sum");
const inputField = document.querySelector(".input-field");
let firstNumber = "";
let secondNumber = "";
let operation = "";
numberEl.forEach((number) => {
number.addEventListener("click", (e) => {
if (firstNumber && operation) {
secondNumber += e.target.textContent;
} else {
firstNumber += e.target.textContent;
}
inputField.value = `${firstNumber}${operation}${secondNumber}`;
});
});
operatorEl.forEach((operator) => {
operator.addEventListener("click", (e) => {
operation = e.target.textContent;
operate(firstNumber, secondNumber, operation);
const inputValue = inputField.value;
inputField.value = `${inputValue}${operation}`;
});
});
function operate(a, b, operation) {
a = Number(a);
b = Number(b);
if (operation === "+") {
inputField.value = a + b;
} else if (operation === "-") {
inputField.value = a - b;
} else if (operation === "*") {
inputField.value = a * b;
} else if (operation === "/") {
inputField.value = a / b;
}
firstNumber = inputField.value;
secondNumber = "";
}
/* This code works but i am using inputField.value in argument which i should not use
function operate(a, b, operation) {
a = Number(a);
b = Number(b);
if (inputField.value === `${a}+${b}`) {
inputField.value = a + b;
} else if (inputField.value === `${a}-${b}`) {
inputField.value = a - b;
} else if (inputField.value === `${a}*${b}`) {
inputField.value = a * b;
} else if (inputField.value === `${a}/${b}`) {
inputField.value = a / b;
}
firstNumber = inputField.value;
secondNumber = "";
}
*/
sumEl.addEventListener("click", function () {
operate(firstNumber, secondNumber, operation);
});
clearEl.addEventListener("click", function () {
inputField.value = "";
firstNumber = "";
secondNumber = "";
operation = "";
});
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Document</title>
</head>
<body>
<main class="container">
<input name="input-field" type="text" class="input-field" readonly />
<div class="grid">
<button class="btns clear">C</button>
<button class="btns operator">/</button>
<button class="btns operator">*</button>
<button class="btns operator">-</button>
<button class="btns number">7</button>
<button class="btns number">8</button>
<button class="btns number">9</button>
<button class="btns operator">+</button>
<button class="btns number">4</button>
<button class="btns number">5</button>
<button class="btns number">6</button>
<button class="btns sum">=</button>
<button class="btns number">1</button>
<button class="btns number">2</button>
<button class="btns number">3</button>
<button class="btns number">0</button>
<button class="btns number">.</button>
</div>
</main>
<script src="script.js"></script>
</body>
</html>
