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.
JavaScript
x
95
95
1
const calcDisplay = document.querySelector('.output');2
calcDisplay.textContent = '0'3
4
let num2 = ''5
6
const add = (a, b) => a + b;7
const subtract = (a, b) => a - b;8
const multiply = (a, b) => a * b;9
const divide = (a, b) => a / b;10
11
//assigning calculator functions to operators' buttons //12
const buttonOperation = document.querySelectorAll('.keyButtonOperation').forEach(operator => {13
operator.addEventListener('click', () => {14
operator.classList.add('isDepressed');15
operator = operator.dataset.action;16
num2 = calcDisplay.textContent;17
if (operator === 'add') {18
return add;19
} if (operator === 'subtract') {20
return subtract;21
}22
23
24
25
});26
}) 27
28
29
//an event that make digits appear on the display // 30
const buttons = document.querySelectorAll('.keyButton').forEach(button => {31
button.addEventListener('click', () => {32
removeClass();33
num1 = button.textContent;34
displayedNum = calcDisplay.textContent;35
36
if (displayedNum === '0') {37
calcDisplay.textContent = num1;38
} else if (displayedNum === num2) {39
calcDisplay.textContent = num140
} else {41
calcDisplay.textContent = displayedNum + num142
}43
44
});45
46
});47
48
49
const buttonEquals = document.querySelector('.keyButtonEquals');50
buttonEquals.addEventListener('click', () => {51
num1 = calcDisplay.textContent;52
document.querySelectorAll('.keyButtonOperation').forEach(operator => {53
operator = operator.dataset.action54
if(operator === 'add') {55
calcDisplay.textContent = parseInt(num1) + parseInt(num2);56
} else if (operator === 'subtract') {57
calcDisplay.textContent = parseInt(num1) - parseInt(num2)58
}59
60
}); 61
});62
63
64
65
66
67
68
69
70
71
// Clears the whole display with one click //72
const buttonClear = document.querySelector('.keyButtonClear');73
buttonClear.addEventListener('click', () => {74
calcDisplay.textContent = '0'75
// I will fill up the rest of the code here when I get done with the rest //76
77
});78
79
// Deletes a single number when you click a button //80
function deleteInput() {81
const deleteButton = document.querySelector('.keyButtonDelete')82
deleteButton.addEventListener('click', () => {83
calcDisplay.textContent = calcDisplay.textContent.slice(0, -1);84
85
});86
}87
deleteInput()88
89
//removes a selection of a operator after a second number is clicked //90
function removeClass () {91
buttonRemove = document.querySelectorAll('.keyButtonOperation').forEach(button => {92
button.classList.remove('isDepressed')93
94
});95
}JavaScript
1
42
42
1
<!DOCTYPE html>2
<html lang="en">3
<head>4
<meta charset="UTF-8">5
<title>Calculator</title>6
<link rel="stylesheet" href="./styles/style.css">7
<body>8
<div class="calcContainer">9
10
11
<div class="buttons">12
<div class="output">13
</div>14
<button class="keyButton">7</button>15
<button class="keyButton">8</button>16
<button class="keyButton">9</button>17
<button class="keyButtonOperation" data-action = "SignChange" >+/-</button>18
<button class="keyButtonDelete">DEL</button>19
20
<button class="keyButton">4</button>21
<button class="keyButton">5</button>22
<button class="keyButton">6</button>23
<button class="keyButtonOperation" data-action="multiply">X</button>24
<button class="keyButtonOperation" data-action="divide">%</button>25
26
<button class="keyButton">1</button>27
<button class="keyButton">2</button>28
<button class="keyButton">3</button>29
<button class="keyButtonOperation" data-action = "subtract">-</button>30
<button class="keyButtonEquals" id="dupa">=</button>31
32
<button class="keyButtonClear">C</button>33
<button class="keyButton">0</button>34
<button class="keyButton">.</button>35
<button class="keyButtonOperation" data-action = "add">+</button>36
</div>37
</div>38
39
<script src="./scripts/script.js"></script>40
</body>41
</head>42
</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
JavaScript
1
73
73
1
const calcDisplay = document.querySelector('.output');2
calcDisplay.textContent = '0'3
let total = 0 // ADDED new variable to store total4
let oper = '' // have an operation variable to know what to do when = is pressed5
let num1 = ''6
let num2 = ''7
8
//an event that make digits appear on the display // 9
const buttons = document.querySelectorAll('.keyButton').forEach(button => {10
button.addEventListener('click', () => {11
if (calcDisplay.textContent == '0' || (num2 == '' && oper != '')){12
calcDisplay.textContent = ''13
}14
if (oper == '' || num1 != ''){ //to allow for bigger then 9 numbers15
calcDisplay.textContent += button.textContent;16
}else{17
calcDisplay.textContent = button.textContent;18
}19
20
if (num1 == '' || oper == '') {21
num1 = calcDisplay.textContent; 22
} else {23
num2 = calcDisplay.textContent; 24
} 25
26
});27
28
});29
30
document.querySelectorAll('.keyButtonOperation').forEach(operator => {31
operator.addEventListener('click', () => {32
oper = operator.dataset.action33
});34
});35
const equalButton = document.querySelector('.keyButtonEquals')36
equalButton.addEventListener('click', () => {37
switch (oper){38
case 'add':39
total = parseInt(num1) + parseInt(num2);40
break;41
case 'subtract':42
total = parseInt(num1) - parseInt(num2);43
break;44
case 'multiply':45
total = parseInt(num1) * parseInt(num2);46
break;47
case 'divide':48
total = parseInt(num1) / parseInt(num2);49
break;50
}51
calcDisplay.textContent = total;52
oper = ''53
num2 = '';54
num1 = total;55
});56
57
// Clears the whole display with one click //58
//const buttonClear = document.querySelector('.keyButtonClear');59
//buttonClear.addEventListener('click', () => {60
//calcDisplay.textContent = '0'61
// I will fill up the rest of the code here when I get done with the rest //62
63
//});64
65
// Deletes a single number when you click a button //66
function deleteInput() {67
const deleteButton = document.querySelector('.keyButtonDelete')68
deleteButton.addEventListener('click', () => {69
calcDisplay.textContent = calcDisplay.textContent.slice(0, -1);70
71
});72
}73
deleteInput()JavaScript
1
42
42
1
<!DOCTYPE html>2
<html lang="en">3
<head>4
<meta charset="UTF-8">5
<title>Calculator</title>6
<link rel="stylesheet" href="./styles/style.css">7
<body>8
<div class="calcContainer">9
10
11
<div class="buttons">12
<div class="output">13
</div>14
<button class="keyButton">7</button>15
<button class="keyButton">8</button>16
<button class="keyButton">9</button>17
<button class="keyButtonOperation" data-action = "SignChange" >+/-</button>18
<button class="keyButtonDelete">DEL</button>19
20
<button class="keyButton">4</button>21
<button class="keyButton">5</button>22
<button class="keyButton">6</button>23
<button class="keyButtonOperation" data-action="multiply">X</button>24
<button class="keyButtonOperation" data-action="divide">%</button>25
26
<button class="keyButton">1</button>27
<button class="keyButton">2</button>28
<button class="keyButton">3</button>29
<button class="keyButtonOperation" data-action = "subtract">-</button>30
<button class="keyButtonEquals" id="dupa">=</button>31
32
<button class="keyButtonClear">C</button>33
<button class="keyButton">0</button>34
<button class="keyButton">.</button>35
<button class="keyButtonOperation" data-action = "add">+</button>36
</div>37
</div>38
39
<script src="./scripts/script.js"></script>40
</body>41
</head>42
</html>