所以基本上，当我想做减法时，它会加上数字。当我为乘法和除法写同样的代码时，它也做了同样的事情。它不是除法，而是加法等等。我不知道为什么会发生这种情况。这就像我的javascript忽略dataset.action，把运算符当作一个按钮。如果我放入parseInt(num1)-parseInt(num2)，那么所有运算符都会减去数字。
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>它确实需要清理，可能应该重新制作，因为所有操作/num press都存储在一个数组中，这样才能进行更复杂的操作，。
这里的主要思想是有一个num1和num2变量，它被设置为操作的第一个和第二个参数，操作类型存储在oper中，然后当用户按下=时，开关被触发并进行操作
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>存在多个逻辑缺陷和不一致，
导致常量添加的问题是，用于检查按下了哪个按钮的变量运算符(ei:if(operator === 'add')..)被定义为所有运算符。
document.querySelectorAll('.keyButtonOperation').forEach(operator => {只是在不同的按钮之间迭代，add是最后一个按钮，因此它总是被触发的，修复将取决于您的目标，您是在寻找多个链式操作(3+4*2/6)还是只寻找一个操作(9/3)，如果您想要多个操作，则需要处理操作的顺序。
您还将onclicks设置为需要输入但没有明确输出的函数const add = (a，b) =>a+b;JS无法猜测a和b对应的内容，或者如果不告诉它如何设置，则无法设置输出文本。