So basically when I want to subtract, it adds numbers. When I wrote the same code for multiply and divide, it did the same thing. Instead of dividing, it was adding numbers etc. I have no idea why it’s happening. It’s like my javascript ignores dataset.action and treats operators like one button. If I put parseInt(num1) – parseInt(num2), then all operators subtract numbers.
const calcDisplay = document.querySelector('.output');
calcDisplay.textContent = '0'
let num2 = ''
const add = (a, b) => a + b;
const subtract = (a, b) => a - b;
const multiply = (a, b) => a * b;
const divide = (a, b) => a / b;
//assigning calculator functions to operators' buttons //
const buttonOperation = document.querySelectorAll('.keyButtonOperation').forEach(operator => {
operator.addEventListener('click', () => {
operator.classList.add('isDepressed');
operator = operator.dataset.action;
num2 = calcDisplay.textContent;
if (operator === 'add') {
return add;
} if (operator === 'subtract') {
return subtract;
}
});
})
//an event that make digits appear on the display //
const buttons = document.querySelectorAll('.keyButton').forEach(button => {
button.addEventListener('click', () => {
removeClass();
num1 = button.textContent;
displayedNum = calcDisplay.textContent;
if (displayedNum === '0') {
calcDisplay.textContent = num1;
} else if (displayedNum === num2) {
calcDisplay.textContent = num1
} else {
calcDisplay.textContent = displayedNum + num1
}
});
});
const buttonEquals = document.querySelector('.keyButtonEquals');
buttonEquals.addEventListener('click', () => {
num1 = calcDisplay.textContent;
document.querySelectorAll('.keyButtonOperation').forEach(operator => {
operator = operator.dataset.action
if(operator === 'add') {
calcDisplay.textContent = parseInt(num1) + parseInt(num2);
} else if (operator === 'subtract') {
calcDisplay.textContent = parseInt(num1) - parseInt(num2)
}
});
});
// Clears the whole display with one click //
const buttonClear = document.querySelector('.keyButtonClear');
buttonClear.addEventListener('click', () => {
calcDisplay.textContent = '0'
// I will fill up the rest of the code here when I get done with the rest //
});
// Deletes a single number when you click a button //
function deleteInput() {
const deleteButton = document.querySelector('.keyButtonDelete')
deleteButton.addEventListener('click', () => {
calcDisplay.textContent = calcDisplay.textContent.slice(0, -1);
});
}
deleteInput()
//removes a selection of a operator after a second number is clicked //
function removeClass () {
buttonRemove = document.querySelectorAll('.keyButtonOperation').forEach(button => {
button.classList.remove('isDepressed')
});
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Calculator</title>
<link rel="stylesheet" href="./styles/style.css">
<body>
<div class="calcContainer">
<div class="buttons">
<div class="output">
</div>
<button class="keyButton">7</button>
<button class="keyButton">8</button>
<button class="keyButton">9</button>
<button class="keyButtonOperation" data-action = "SignChange" >+/-</button>
<button class="keyButtonDelete">DEL</button>
<button class="keyButton">4</button>
<button class="keyButton">5</button>
<button class="keyButton">6</button>
<button class="keyButtonOperation" data-action="multiply">X</button>
<button class="keyButtonOperation" data-action="divide">%</button>
<button class="keyButton">1</button>
<button class="keyButton">2</button>
<button class="keyButton">3</button>
<button class="keyButtonOperation" data-action = "subtract">-</button>
<button class="keyButtonEquals" id="dupa">=</button>
<button class="keyButtonClear">C</button>
<button class="keyButton">0</button>
<button class="keyButton">.</button>
<button class="keyButtonOperation" data-action = "add">+</button>
</div>
</div>
<script src="./scripts/script.js"></script>
</body>
</head>
</html>Advertisement
Answer
It definitly needs to be cleaned up and probably should be remade where all operations/num presses are stored in a array to then be able to have more complex operations,.
The main idea here is to have a num1 and num2 variable that gets set to the first and second arguments of the operation, the operation type is stored in oper then when the user presses = is switch is triggered and does the operation
const calcDisplay = document.querySelector('.output');
calcDisplay.textContent = '0'
let total = 0 // ADDED new variable to store total
let oper = '' // have an operation variable to know what to do when = is pressed
let num1 = ''
let num2 = ''
//an event that make digits appear on the display //
const buttons = document.querySelectorAll('.keyButton').forEach(button => {
button.addEventListener('click', () => {
if (calcDisplay.textContent == '0' || (num2 == '' && oper != '')){
calcDisplay.textContent = ''
}
if (oper == '' || num1 != ''){ //to allow for bigger then 9 numbers
calcDisplay.textContent += button.textContent;
}else{
calcDisplay.textContent = button.textContent;
}
if (num1 == '' || oper == '') {
num1 = calcDisplay.textContent;
} else {
num2 = calcDisplay.textContent;
}
});
});
document.querySelectorAll('.keyButtonOperation').forEach(operator => {
operator.addEventListener('click', () => {
oper = operator.dataset.action
});
});
const equalButton = document.querySelector('.keyButtonEquals')
equalButton.addEventListener('click', () => {
switch (oper){
case 'add':
total = parseInt(num1) + parseInt(num2);
break;
case 'subtract':
total = parseInt(num1) - parseInt(num2);
break;
case 'multiply':
total = parseInt(num1) * parseInt(num2);
break;
case 'divide':
total = parseInt(num1) / parseInt(num2);
break;
}
calcDisplay.textContent = total;
oper = ''
num2 = '';
num1 = total;
});
// Clears the whole display with one click //
//const buttonClear = document.querySelector('.keyButtonClear');
//buttonClear.addEventListener('click', () => {
//calcDisplay.textContent = '0'
// I will fill up the rest of the code here when I get done with the rest //
//});
// Deletes a single number when you click a button //
function deleteInput() {
const deleteButton = document.querySelector('.keyButtonDelete')
deleteButton.addEventListener('click', () => {
calcDisplay.textContent = calcDisplay.textContent.slice(0, -1);
});
}
deleteInput()<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Calculator</title>
<link rel="stylesheet" href="./styles/style.css">
<body>
<div class="calcContainer">
<div class="buttons">
<div class="output">
</div>
<button class="keyButton">7</button>
<button class="keyButton">8</button>
<button class="keyButton">9</button>
<button class="keyButtonOperation" data-action = "SignChange" >+/-</button>
<button class="keyButtonDelete">DEL</button>
<button class="keyButton">4</button>
<button class="keyButton">5</button>
<button class="keyButton">6</button>
<button class="keyButtonOperation" data-action="multiply">X</button>
<button class="keyButtonOperation" data-action="divide">%</button>
<button class="keyButton">1</button>
<button class="keyButton">2</button>
<button class="keyButton">3</button>
<button class="keyButtonOperation" data-action = "subtract">-</button>
<button class="keyButtonEquals" id="dupa">=</button>
<button class="keyButtonClear">C</button>
<button class="keyButton">0</button>
<button class="keyButton">.</button>
<button class="keyButtonOperation" data-action = "add">+</button>
</div>
</div>
<script src="./scripts/script.js"></script>
</body>
</head>
</html>