如标题所示。当我输入个位数时，它工作得很好，但是当我尝试输入更大的数字时，比如两位数，它不工作，我不知道为什么。它似乎只读取第二个数字的第二位，例如:50 + 55(它被读取为5)，所以结果是55。与3位数字相同，它只读取第二个数字的第三位数字。
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')
switch(operator) {
case(operator.dataset.action === 'add'):
return add(a, b)
case(operator.dataset.action === 'substract'):
return subtract(a, b)
case(operator.dataset.action === 'multiply'):
return multiply(a, b)
case(operator.dataset.action === 'divide'):
return divide(a, b)
}
num2 = calcDisplay.textContent
})
});
//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', () => {
document.querySelectorAll('.keyButtonOperation').forEach(operator => {
if(operator.dataset.action === 'add') {
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 = "substract">-</button>
<button class="keyButtonEquals">=</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>我认为以下方法可以解决你的问题:
//...
const buttonEquals = document.querySelector('.keyButtonEquals');
buttonEquals.addEventListener('click', () => {
// ADD THIS:
num1 = calcDisplay.textContent;
document.querySelectorAll('.keyButtonOperation').forEach(operator => {
if(operator.dataset.action === 'add') {
calcDisplay.textContent = parseInt(num1) + parseInt(num2)
}
});
});
//...
您必须将num1设置为显示的值。否则，使用最后输入的数字。
Beni Trainor的答案就是你正在寻找的答案。然而，下面的计算器我写的，基于你的计算器，可能对你有一些用处。它允许一次对多个数字进行更复杂的操作。这可能对你有用，但我很高兴贝尼·特莱纳的回答足以满足你的需求!
// These are the characters which are allowed in the display.
var allowed = /[0-9()*/+-.]/g;
// This evaluates a string as an equation according to the allowed characters above.
function solve(equation) {
try {
if(equation == '') {
return '';
}
return Function('return Number('+equation.match(allowed).join('')+');')();
} catch {
return 'Error';
}
}
document.addEventListener("DOMContentLoaded", () => {
// Create a variable containing the display element for ease of reference.
var display = document.querySelector('.calculator .display');
// Add scrolling to the display with a smooth scroll behavior.
display.addEventListener('wheel', function(event) {
event.preventDefault();
var i = 0;
var interval = setInterval(() => {
this.scrollBy((event.deltaY/Math.abs(event.deltaY))*2, 0);
i+= 2;
if(i >= Math.abs(event.deltaY)) {
clearInterval(interval);
}
}, 1);
});
// Allow character buttons to input their character to the display.
document.querySelectorAll('.calculator .character').forEach(element => {
element.addEventListener('click', function() {
display.value+= this.innerText;
// This ensures that the display only contains allowed characters.
display.value = display.value.match(allowed).join('');
display.scrollTo(display.scrollWidth, 0);
});
});
// Allow the delete action key to delete characters from the display.
document.querySelector('.calculator .delete').addEventListener('click', function() {
// This ensures that the display only contains allowed characters.
try {
display.value = display.value.slice(0, -1).match(allowed).join('');
} catch {
display.value = '';
}
display.scrollTo(display.scrollWidth, 0);
});
// Allow the submit action key to calculate the user's equation.
document.querySelector('.calculator .submit').addEventListener('click', function() {
var solution = solve(display.value);
// YOUR CODE GOES HERE TO STORE OR OTHERWISE PROCESS THE SOLUTION
display.value = solution;
});
// Allow the clear action key to clear the display.
document.querySelector('.calculator .clear').addEventListener('click', function() {
display.value = '';
});
});body, body :not(head) {
box-sizing: border-box;
font-size: inherit;
}
.calculator {
display: flex;
flex-wrap: wrap;
width: 300px;
height: 400px;
border: 1px solid black;
font-size: 30px;
}
.display {
width: 100%;
height: 20%;
padding: 1ch;
background-color: white;
border: 1px solid black;
text-align: right;
}
button {
width: 20%;
height: 20%;
background-color: white;
}
button:hover:not(:active) {
background-color: #FAFAFA;
}
button.number {
border: 1px dotted lightgray;
}
button.operator {
border: 1px dashed black;
}
button.action {
border: 1px solid black;
}<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class='calculator'>
<input class='display' disabled />
<button class='character number'>7</button>
<button class='character number'>8</button>
<button class='character number'>9</button>
<button class='character operator'>(</button>
<button class='character operator'>)</button>
<button class='character number'>4</button>
<button class='character number'>5</button>
<button class='character number'>6</button>
<button class='character operator'>*</button>
<button class='character operator'>/</button>
<button class='character number'>1</button>
<button class='character number'>2</button>
<button class='character number'>3</button>
<button class='character operator'>+</button>
<button class='character operator'>-</button>
<button class='action delete'>␡</button>
<button class='character number'>0</button>
<button class='character operator'>.</button>
<button class='action submit'>=</button>
<button class='action clear'>C</button>
</div>
</body>
</html>