Я начинающий программист, и я впервые пишу здесь. Поэтому моя цель - создать надежный калькулятор, и сейчас я столкнулся с проблемой изменения операций в середине своих вычислений - например: я получил 1 + 1, но когда я нахожусь в 1+ и хочу изменить его на -, / или * Я не могу. Пытался найти решение, но другие делают свои вычисления по-своему, поэтому я спрашиваю здесь. Проект вашего вопроса советует показывать минимум кода, поэтому я публикую то, что я считаю уместным ниже. Если кому-то понадобится больше кода, чтобы помочь мне с этой проблемой, я могу отправить ссылку на кодовый штырь, но не рекомендуется отправлять ее сюда.
class Calculator {
constructor(previousOperandTextElement, currentOperandTextElement){
this.previousOperandTextElement = previousOperandTextElement;
this.currentOperandTextElement = currentOperandTextElement;
this.readyToReset = false;
this.clear();
}
clear() {
this.currentOperand = "";
this.previousOperand = "";
this.operation = undefined;
}
delete() {
this.currentOperand = this.currentOperand.toString().slice(0, -1);
}
appendNumber(number) {
if (number === "." && this.currentOperand.includes(".")) return
this.currentOperand = this.currentOperand.toString() + number.toString();
}
chooseOperation(operation) {
if (this.currentOperand === "") return
if (this.currentOperand !== "" && this.previousOperand !== "") this.compute();
this.operation = operation;
this.previousOperand = this.currentOperand;
this.currentOperand = "";
}
compute() {
let computation
const prev = parseFloat(this.previousOperand);
const current = parseFloat(this.currentOperand);
if (isNaN(prev) || isNaN(current)) return;
switch (this.operation) {
case "+":
computation = prev + current;
break;
case "-":
computation = prev - current;
break;
case "*":
computation = prev * current;
break;
case "÷":
computation = prev / current;
break;
default:
return;
}
this.readyToReset = true;
this.currentOperand = computation;
this.operation = undefined;
this.previousOperand = "";
}
updateDisplay() {
this.currentOperandTextElement.innerText = this.currentOperand;
if (this.operation != null) {
this.previousOperandTextElement.innerText =
`${this.previousOperand} ${this.operation}`
} else {
this.previousOperandTextElement.innerText = "";
}
}
}
const numberButtons = document.querySelectorAll("[data-number]");
const operationButtons = document.querySelectorAll("[data-operation]");
const equalsButton = document.querySelector("[data-equals]");
const deleteButton = document.querySelector("[data-delete]");
const allClearButton = document.querySelector("[data-clear]");
const previousOperandTextElement = document.querySelector("[data-previous-operand]");
const currentOperandTextElement = document.querySelector("[data-current-operand]");
const calculator = new Calculator(previousOperandTextElement,
currentOperandTextElement);
allClearButton.addEventListener("click", () => {
calculator.clear();
calculator.updateDisplay();
})
numberButtons.forEach(button => {
button.addEventListener("click", () => {
if(calculator.previousOperand === "" &&
calculator.currentOperand !== "" &&
calculator.readyToReset) {
calculator.currentOperand = "";
calculator.readyToReset = false;
}
calculator.appendNumber(button.innerText)
calculator.updateDisplay();
})
})
operationButtons.forEach(button => {
button.addEventListener("click", () => {
calculator.chooseOperation(button.innerText)
calculator.updateDisplay();
})
})
equalsButton.addEventListener("click", button => {
calculator.compute();
calculator.updateDisplay();
})
deleteButton.addEventListener("click", button => {
calculator.delete();
calculator.updateDisplay();
})
.calculator-grid{
display: grid;
justify-content: center;
align-items: center;
min-height: 100;
grid-template-columns: repeat(4, 80px);
}
.calculator-grid > button {
cursor: pointer;
font-size: 2em;
border: 1px solid rgb(0, 0, 0);
outline: none;
background-color: rgb(233, 129, 129);
margin: 1px;
border-radius: 10px;
}
.output {
grid-column: 1 / -1;
background-color: rgb(251, 251, 251);
display: flex;
align-items: flex-end;
justify-content: space-between;
flex-direction: column;
padding: 10px;
height: 100px;
}
#kalkulacka{
width: 360px;
height: 520px;
background-color: rgb(0, 255, 221);
margin: auto;
top: 20px;
position: center;
border-radius: 10px;
}
.span-two{
grid-column: span 2;
}
<div id="kalkulacka" class="calculator-grid">
<div class="output">
<div data-history class="history">22</div>
<div data-previous-operand class="previous-operand">22</div>
<div data-current-operand class="current-operand">22</div>
</div>
<button data-clear>AC</button>
<button data-delete>DEL</button>
<button data-converse>+/-</button>
<button data-operation>÷</button>
<button data-number>7</button>
<button data-number>8</button>
<button data-number>9</button>
<button data-operation>*</button>
<button data-number>4</button>
<button data-number>5</button>
<button data-number>6</button>
<button data-operation>-</button>
<button data-number>1</button>
<button data-number>2</button>
<button data-number>3</button>
<button data-operation>+</button>
<button data-number>.</button>
<button data-number>0</button>
<button data-equals class="span-two">=</button>
</div>