This is the customized button I made for the parentheses.
<div class="col">
<button class="parentheses rounded-pill btn-outline-primary btn btn-lg" id="keyButton" data-key="operator"&qt;()</button>
</div>
I have a specific requirement where I want to display "(" only if there is no number on the calculator display. If there is already a number on the display, then I need to add ")" to it.
Below is the JavaScript code I have implemented to achieve this functionality.
for (let i = 0; i < keyButton.length; i++) { // Iterates through keyButton to fetch values
// console.log(keyButton[i].textContent); // Output all keyButton values
keyButton[i].addEventListener('click', function () {
// console.log(keyButton[i].textContent);
if (mathOperators.includes(keyButton[i].textContent)){
console.log('operator');
}
if (keyNumbers.includes(keyButton[i].textContent)) {
console.log('number');
}
if (keyButton[i].textContent === '=') {
count = eval(assigned);
}
if (keyButton[i].textContent === 'C') {
// Clear entire screen
}
if (keyButton[i].textContent === '<-') {
// Clear one value
}
if (keyButton[i].textContent === '(') {
console.log("(")
} else
if (keyButton[i].textContent !== "(") {
console.log(")")
}
updateScreen(keyButton[i].textContent);
});
}
function updateScreen (kb) {
displayNum.textContent = assigned+=kb; // Shows the current number on the calculator
answer.textContent = count;
backspace.removeAttribute('disabled');
}
const mathOperators = ['+', '*', '/', '-', '=', 'C', '+/-', '%', '()', '(-', '.', '<-'];
Upon testing, I found that the button always displays "()" regardless of the scenario, instead of showing either "(" or ")".