JavaScript 计算器 - 允许负数作为第一个操作数
JavaScript Calculator - Allowing negative number to be first operand
我正在研究一个基本的 JavaScript 计算器,我也希望能够开始计算负数。现在,如果我在输入数字之前单击“-”,“-”将不会显示,因此我只能从正数开始。
有人可以告诉我如何将其包含在我的代码中吗?
const prevText = document.querySelector('[data-prev]');
const currentText = document.querySelector('[data-current]');
const buttons = document.querySelectorAll('.btn');
const resetBtn = document.querySelector('[data-reset]');
const delBtn = document.querySelector('[data-delete]');
const numberBtn = document.querySelectorAll('[data-number]');
const operationBtn = document.querySelectorAll('[data-operator]');
const equalBtn = document.querySelector('[data-equal]');
class Calculator {
constructor(prevText, currentText) {
this.prevText = prevText;
this.currentText = currentText;
this.clear();
}
clear() {
this.prev = '';
this.current = '';
this.operator = undefined;
}
delete() {
this.current = this.current.toString().slice(0, -1);
if (this.current === '') {
this.current = this.prev;
this.prev = '';
this.operator = undefined;
}
}
appendNumber(nr) {
this.current = this.current.toString() + nr.toString();
}
chooseOperation(operator) {
if (this.current === '') return;
if (this.prev !== '') {
this.calculate();
}
this.operator = operator;
this.prev = this.current;
this.current = '';
}
calculate() {
let result;
const previousValue = parseInt(this.prev);
const currentValue = parseInt(this.current);
if (isNaN(previousValue) || isNaN(currentValue)) return;
switch (this.operator) {
case '+':
result = previousValue + currentValue;
break;
case '-':
result = previousValue - currentValue;
break;
default:
return;
}
this.current = result;
this.operator = undefined;
this.prev = '';
}
getDisplayNr(nr) {
const floatNr = parseFloat(nr);
if (isNaN(floatNr)) return '';
return floatNr.toLocaleString('en');
}
updateDisplay() {
this.currentText.innerText = this.getDisplayNr(this.current);
// this.prevText.innerText = this.prev;
if (this.operator != null) {
this.prevText.innerText = ` ${this.getDisplayNr(this.prev)} ${
this.operator
}`;
} else {
this.prevText.innerText = '';
}
}
}
const calculator = new Calculator(prevText, currentText);
numberBtn.forEach((btn) => {
btn.addEventListener('click', () => {
calculator.appendNumber(btn.innerText);
calculator.updateDisplay();
});
});
operationBtn.forEach((btn) => {
btn.addEventListener('click', () => {
calculator.chooseOperation(btn.innerText);
calculator.updateDisplay();
});
});
equalBtn.addEventListener('click', (btn) => {
calculator.calculate();
calculator.updateDisplay();
});
resetBtn.addEventListener('click', (btn) => {
calculator.clear();
calculator.updateDisplay();
});
delBtn.addEventListener('click', (btn) => {
calculator.delete();
calculator.updateDisplay();
});
<div class="calculator">
<div class="calculation">
<div data-prev class="prev"></div>
<div data-current class="current"></div>
<!-- <div class="display">0</div> -->
</div>
<button class="bigger reset btn" data-reset>RES</button>
<button class="bigger delete btn" data-delete>DEL</button>
<button class="nr btn" data-number>1</button>
<button class="nr btn" data-number>2</button>
<button class="nr btn" data-number>3</button>
<button class="plus operator btn" data-key='plus' data-operator>+</button>
<button class="nr btn" data-number>4</button>
<button class="nr btn" data-number>5</button>
<button class="nr btn" data-number>6</button>
<button class="minus operator btn" data-key='minus' data-operator>-</button>
<button class="nr btn" data-number>7</button>
<button class="nr btn" data-number>8</button>
<button class="nr btn" data-number>9</button>
<button class="nr btn" data-number>0</button>
<button class="bigger equal btn" data-equal>=</button>
</div>
您可以在 checkOperator
方法中添加对 -
的检查。如果您发现 -
并且 currentValue
是 null
,则将 currentValue
设置为 0
我在下面添加了两行;
if (this.current === '' && !operator == '-') return;
if (this.current === '' && operator == '-') this.current = 0;
请参阅下面的代码段:
const prevText = document.querySelector('[data-prev]');
const currentText = document.querySelector('[data-current]');
const buttons = document.querySelectorAll('.btn');
const resetBtn = document.querySelector('[data-reset]');
const delBtn = document.querySelector('[data-delete]');
const numberBtn = document.querySelectorAll('[data-number]');
const operationBtn = document.querySelectorAll('[data-operator]');
const equalBtn = document.querySelector('[data-equal]');
class Calculator {
constructor(prevText, currentText) {
this.prevText = prevText;
this.currentText = currentText;
this.clear();
}
clear() {
this.prev = '';
this.current = '';
this.operator = undefined;
}
delete() {
this.current = this.current.toString().slice(0, -1);
if (this.current === '') {
this.current = this.prev;
this.prev = '';
this.operator = undefined;
}
}
appendNumber(nr) {
this.current = this.current.toString() + nr.toString();
if(this.prev == '')
this.calculate();
}
chooseOperation(operator) {
if (this.current === '' && !operator == '-') return;
//if (this.current === '' && operator == '-') this.current = 0;
if (this.prev !== '') {
this.calculate();
}
this.operator = operator;
this.prev = this.current;
this.current = '';
}
calculate() {
let result;
const previousValue = parseInt(this.prev) || 0;
const currentValue = parseInt(this.current);
if (isNaN(previousValue) || isNaN(currentValue)) return;
switch (this.operator) {
case '+':
result = previousValue + currentValue;
break;
case '-':
result = previousValue - currentValue;
break;
default:
return;
}
this.current = result;
this.operator = undefined;
this.prev = '';
}
getDisplayNr(nr) {
const floatNr = parseFloat(nr);
if (isNaN(floatNr)) return '';
return floatNr.toLocaleString('en');
}
updateDisplay() {
this.currentText.innerText = this.getDisplayNr(this.current);
// this.prevText.innerText = this.prev;
if (this.operator != null) {
this.prevText.innerText = ` ${this.getDisplayNr(this.prev)} ${
this.operator
}`;
} else {
this.prevText.innerText = '';
}
}
}
const calculator = new Calculator(prevText, currentText);
numberBtn.forEach((btn) => {
btn.addEventListener('click', () => {
calculator.appendNumber(btn.innerText);
calculator.updateDisplay();
});
});
operationBtn.forEach((btn) => {
btn.addEventListener('click', () => {
calculator.chooseOperation(btn.innerText);
calculator.updateDisplay();
});
});
equalBtn.addEventListener('click', (btn) => {
calculator.calculate();
calculator.updateDisplay();
});
resetBtn.addEventListener('click', (btn) => {
calculator.clear();
calculator.updateDisplay();
});
delBtn.addEventListener('click', (btn) => {
calculator.delete();
calculator.updateDisplay();
});
<div class="calculator">
<div class="calculation">
<div data-prev class="prev"></div>
<div data-current class="current"></div>
<!-- <div class="display">0</div> -->
</div>
<button class="bigger reset btn" data-reset>RES</button>
<button class="bigger delete btn" data-delete>DEL</button>
<button class="nr btn" data-number>1</button>
<button class="nr btn" data-number>2</button>
<button class="nr btn" data-number>3</button>
<button class="plus operator btn" data-key='plus' data-operator>+</button>
<button class="nr btn" data-number>4</button>
<button class="nr btn" data-number>5</button>
<button class="nr btn" data-number>6</button>
<button class="minus operator btn" data-key='minus' data-operator>-</button>
<button class="nr btn" data-number>7</button>
<button class="nr btn" data-number>8</button>
<button class="nr btn" data-number>9</button>
<button class="nr btn" data-number>0</button>
<button class="bigger equal btn" data-equal>=</button>
</div>
新更新
您还可以在appendNumber
方法中添加以下条件。如果您首先选择任何运算符,这将调用 calculate
方法。
if(this.prev == '')
this.calculate();
我用 [EDIT] 标记了 2 个代码编辑
const prevText = document.querySelector('[data-prev]');
const currentText = document.querySelector('[data-current]');
const buttons = document.querySelectorAll('.btn');
const resetBtn = document.querySelector('[data-reset]');
const delBtn = document.querySelector('[data-delete]');
const numberBtn = document.querySelectorAll('[data-number]');
const operationBtn = document.querySelectorAll('[data-operator]');
const equalBtn = document.querySelector('[data-equal]');
class Calculator {
constructor(prevText, currentText) {
this.prevText = prevText;
this.currentText = currentText;
this.clear();
}
clear() {
this.prev = '';
this.current = '';
this.operator = undefined;
}
delete() {
this.current = this.current.toString().slice(0, -1);
if (this.current === '') {
this.current = this.prev;
this.prev = '';
this.operator = undefined;
}
}
appendNumber(nr) {
this.current = this.current.toString() + nr.toString();
}
chooseOperation(operator) {
// [EDIT] dont use "-" operator when typed before a number, instead add to this.current (appendNumber)
if(this.current === '' && operator == '-'){
this.appendNumber("-");return;
}
// [/EDIT]
if (this.current === '') return;
if (this.prev !== '') {
this.calculate();
}
this.operator = operator;
this.prev = this.current;
this.current = '';
}
calculate() {
let result;
const previousValue = parseInt(this.prev);
const currentValue = parseInt(this.current);
if (isNaN(previousValue) || isNaN(currentValue)) return;
switch (this.operator) {
case '+':
result = previousValue + currentValue;
break;
case '-':
result = previousValue - currentValue;
break;
default:
return;
}
this.current = result;
this.operator = undefined;
this.prev = '';
}
getDisplayNr(nr) {
const floatNr = parseFloat(nr);
if (isNaN(floatNr)) return '';
return floatNr.toLocaleString('en');
}
updateDisplay() {
this.currentText.innerText = this.getDisplayNr(this.current);
// this.prevText.innerText = this.prev;
if (this.operator != null) {
this.prevText.innerText = ` ${this.getDisplayNr(this.prev)} ${
this.operator
}`;
} else {
this.prevText.innerText = '';
}
}
}
const calculator = new Calculator(prevText, currentText);
numberBtn.forEach((btn) => {
btn.addEventListener('click', () => {
calculator.appendNumber(btn.innerText);
calculator.updateDisplay();
});
});
operationBtn.forEach((btn) => {
btn.addEventListener('click', () => {
calculator.chooseOperation(btn.innerText);
// [EDIT] Dont call updateDisplay, because u havent typed number yet (only "-")
if(!(calculator.current == '' && btn.innerText =="-")){
calculator.updateDisplay();}
// [/EDIT]
});
});
equalBtn.addEventListener('click', (btn) => {
calculator.calculate();
calculator.updateDisplay();
});
resetBtn.addEventListener('click', (btn) => {
calculator.clear();
calculator.updateDisplay();
});
delBtn.addEventListener('click', (btn) => {
calculator.delete();
calculator.updateDisplay();
});
<div class="calculator">
<div class="calculation">
<div data-prev class="prev"></div>
<div data-current class="current"></div>
<!-- <div class="display">0</div> -->
</div>
<button class="bigger reset btn" data-reset>RES</button>
<button class="bigger delete btn" data-delete>DEL</button>
<button class="nr btn" data-number>1</button>
<button class="nr btn" data-number>2</button>
<button class="nr btn" data-number>3</button>
<button class="plus operator btn" data-key='plus' data-operator>+</button>
<button class="nr btn" data-number>4</button>
<button class="nr btn" data-number>5</button>
<button class="nr btn" data-number>6</button>
<button class="minus operator btn" data-key='minus' data-operator>-</button>
<button class="nr btn" data-number>7</button>
<button class="nr btn" data-number>8</button>
<button class="nr btn" data-number>9</button>
<button class="nr btn" data-number>0</button>
<button class="bigger equal btn" data-equal>=</button>
</div>
许多计算器都有一个 +/- 按钮来切换正负值。这也允许您减去负数:2 - (-1) = 3
试试这个在线计算器看看它是如何完成的:https://www.calculatorsoup.com/calculators/math/basic.php
我正在研究一个基本的 JavaScript 计算器,我也希望能够开始计算负数。现在,如果我在输入数字之前单击“-”,“-”将不会显示,因此我只能从正数开始。 有人可以告诉我如何将其包含在我的代码中吗?
const prevText = document.querySelector('[data-prev]');
const currentText = document.querySelector('[data-current]');
const buttons = document.querySelectorAll('.btn');
const resetBtn = document.querySelector('[data-reset]');
const delBtn = document.querySelector('[data-delete]');
const numberBtn = document.querySelectorAll('[data-number]');
const operationBtn = document.querySelectorAll('[data-operator]');
const equalBtn = document.querySelector('[data-equal]');
class Calculator {
constructor(prevText, currentText) {
this.prevText = prevText;
this.currentText = currentText;
this.clear();
}
clear() {
this.prev = '';
this.current = '';
this.operator = undefined;
}
delete() {
this.current = this.current.toString().slice(0, -1);
if (this.current === '') {
this.current = this.prev;
this.prev = '';
this.operator = undefined;
}
}
appendNumber(nr) {
this.current = this.current.toString() + nr.toString();
}
chooseOperation(operator) {
if (this.current === '') return;
if (this.prev !== '') {
this.calculate();
}
this.operator = operator;
this.prev = this.current;
this.current = '';
}
calculate() {
let result;
const previousValue = parseInt(this.prev);
const currentValue = parseInt(this.current);
if (isNaN(previousValue) || isNaN(currentValue)) return;
switch (this.operator) {
case '+':
result = previousValue + currentValue;
break;
case '-':
result = previousValue - currentValue;
break;
default:
return;
}
this.current = result;
this.operator = undefined;
this.prev = '';
}
getDisplayNr(nr) {
const floatNr = parseFloat(nr);
if (isNaN(floatNr)) return '';
return floatNr.toLocaleString('en');
}
updateDisplay() {
this.currentText.innerText = this.getDisplayNr(this.current);
// this.prevText.innerText = this.prev;
if (this.operator != null) {
this.prevText.innerText = ` ${this.getDisplayNr(this.prev)} ${
this.operator
}`;
} else {
this.prevText.innerText = '';
}
}
}
const calculator = new Calculator(prevText, currentText);
numberBtn.forEach((btn) => {
btn.addEventListener('click', () => {
calculator.appendNumber(btn.innerText);
calculator.updateDisplay();
});
});
operationBtn.forEach((btn) => {
btn.addEventListener('click', () => {
calculator.chooseOperation(btn.innerText);
calculator.updateDisplay();
});
});
equalBtn.addEventListener('click', (btn) => {
calculator.calculate();
calculator.updateDisplay();
});
resetBtn.addEventListener('click', (btn) => {
calculator.clear();
calculator.updateDisplay();
});
delBtn.addEventListener('click', (btn) => {
calculator.delete();
calculator.updateDisplay();
});
<div class="calculator">
<div class="calculation">
<div data-prev class="prev"></div>
<div data-current class="current"></div>
<!-- <div class="display">0</div> -->
</div>
<button class="bigger reset btn" data-reset>RES</button>
<button class="bigger delete btn" data-delete>DEL</button>
<button class="nr btn" data-number>1</button>
<button class="nr btn" data-number>2</button>
<button class="nr btn" data-number>3</button>
<button class="plus operator btn" data-key='plus' data-operator>+</button>
<button class="nr btn" data-number>4</button>
<button class="nr btn" data-number>5</button>
<button class="nr btn" data-number>6</button>
<button class="minus operator btn" data-key='minus' data-operator>-</button>
<button class="nr btn" data-number>7</button>
<button class="nr btn" data-number>8</button>
<button class="nr btn" data-number>9</button>
<button class="nr btn" data-number>0</button>
<button class="bigger equal btn" data-equal>=</button>
</div>
您可以在 checkOperator
方法中添加对 -
的检查。如果您发现 -
并且 currentValue
是 null
,则将 currentValue
设置为 0
我在下面添加了两行;
if (this.current === '' && !operator == '-') return;
if (this.current === '' && operator == '-') this.current = 0;
请参阅下面的代码段:
const prevText = document.querySelector('[data-prev]');
const currentText = document.querySelector('[data-current]');
const buttons = document.querySelectorAll('.btn');
const resetBtn = document.querySelector('[data-reset]');
const delBtn = document.querySelector('[data-delete]');
const numberBtn = document.querySelectorAll('[data-number]');
const operationBtn = document.querySelectorAll('[data-operator]');
const equalBtn = document.querySelector('[data-equal]');
class Calculator {
constructor(prevText, currentText) {
this.prevText = prevText;
this.currentText = currentText;
this.clear();
}
clear() {
this.prev = '';
this.current = '';
this.operator = undefined;
}
delete() {
this.current = this.current.toString().slice(0, -1);
if (this.current === '') {
this.current = this.prev;
this.prev = '';
this.operator = undefined;
}
}
appendNumber(nr) {
this.current = this.current.toString() + nr.toString();
if(this.prev == '')
this.calculate();
}
chooseOperation(operator) {
if (this.current === '' && !operator == '-') return;
//if (this.current === '' && operator == '-') this.current = 0;
if (this.prev !== '') {
this.calculate();
}
this.operator = operator;
this.prev = this.current;
this.current = '';
}
calculate() {
let result;
const previousValue = parseInt(this.prev) || 0;
const currentValue = parseInt(this.current);
if (isNaN(previousValue) || isNaN(currentValue)) return;
switch (this.operator) {
case '+':
result = previousValue + currentValue;
break;
case '-':
result = previousValue - currentValue;
break;
default:
return;
}
this.current = result;
this.operator = undefined;
this.prev = '';
}
getDisplayNr(nr) {
const floatNr = parseFloat(nr);
if (isNaN(floatNr)) return '';
return floatNr.toLocaleString('en');
}
updateDisplay() {
this.currentText.innerText = this.getDisplayNr(this.current);
// this.prevText.innerText = this.prev;
if (this.operator != null) {
this.prevText.innerText = ` ${this.getDisplayNr(this.prev)} ${
this.operator
}`;
} else {
this.prevText.innerText = '';
}
}
}
const calculator = new Calculator(prevText, currentText);
numberBtn.forEach((btn) => {
btn.addEventListener('click', () => {
calculator.appendNumber(btn.innerText);
calculator.updateDisplay();
});
});
operationBtn.forEach((btn) => {
btn.addEventListener('click', () => {
calculator.chooseOperation(btn.innerText);
calculator.updateDisplay();
});
});
equalBtn.addEventListener('click', (btn) => {
calculator.calculate();
calculator.updateDisplay();
});
resetBtn.addEventListener('click', (btn) => {
calculator.clear();
calculator.updateDisplay();
});
delBtn.addEventListener('click', (btn) => {
calculator.delete();
calculator.updateDisplay();
});
<div class="calculator">
<div class="calculation">
<div data-prev class="prev"></div>
<div data-current class="current"></div>
<!-- <div class="display">0</div> -->
</div>
<button class="bigger reset btn" data-reset>RES</button>
<button class="bigger delete btn" data-delete>DEL</button>
<button class="nr btn" data-number>1</button>
<button class="nr btn" data-number>2</button>
<button class="nr btn" data-number>3</button>
<button class="plus operator btn" data-key='plus' data-operator>+</button>
<button class="nr btn" data-number>4</button>
<button class="nr btn" data-number>5</button>
<button class="nr btn" data-number>6</button>
<button class="minus operator btn" data-key='minus' data-operator>-</button>
<button class="nr btn" data-number>7</button>
<button class="nr btn" data-number>8</button>
<button class="nr btn" data-number>9</button>
<button class="nr btn" data-number>0</button>
<button class="bigger equal btn" data-equal>=</button>
</div>
新更新
您还可以在appendNumber
方法中添加以下条件。如果您首先选择任何运算符,这将调用 calculate
方法。
if(this.prev == '')
this.calculate();
我用 [EDIT] 标记了 2 个代码编辑
const prevText = document.querySelector('[data-prev]');
const currentText = document.querySelector('[data-current]');
const buttons = document.querySelectorAll('.btn');
const resetBtn = document.querySelector('[data-reset]');
const delBtn = document.querySelector('[data-delete]');
const numberBtn = document.querySelectorAll('[data-number]');
const operationBtn = document.querySelectorAll('[data-operator]');
const equalBtn = document.querySelector('[data-equal]');
class Calculator {
constructor(prevText, currentText) {
this.prevText = prevText;
this.currentText = currentText;
this.clear();
}
clear() {
this.prev = '';
this.current = '';
this.operator = undefined;
}
delete() {
this.current = this.current.toString().slice(0, -1);
if (this.current === '') {
this.current = this.prev;
this.prev = '';
this.operator = undefined;
}
}
appendNumber(nr) {
this.current = this.current.toString() + nr.toString();
}
chooseOperation(operator) {
// [EDIT] dont use "-" operator when typed before a number, instead add to this.current (appendNumber)
if(this.current === '' && operator == '-'){
this.appendNumber("-");return;
}
// [/EDIT]
if (this.current === '') return;
if (this.prev !== '') {
this.calculate();
}
this.operator = operator;
this.prev = this.current;
this.current = '';
}
calculate() {
let result;
const previousValue = parseInt(this.prev);
const currentValue = parseInt(this.current);
if (isNaN(previousValue) || isNaN(currentValue)) return;
switch (this.operator) {
case '+':
result = previousValue + currentValue;
break;
case '-':
result = previousValue - currentValue;
break;
default:
return;
}
this.current = result;
this.operator = undefined;
this.prev = '';
}
getDisplayNr(nr) {
const floatNr = parseFloat(nr);
if (isNaN(floatNr)) return '';
return floatNr.toLocaleString('en');
}
updateDisplay() {
this.currentText.innerText = this.getDisplayNr(this.current);
// this.prevText.innerText = this.prev;
if (this.operator != null) {
this.prevText.innerText = ` ${this.getDisplayNr(this.prev)} ${
this.operator
}`;
} else {
this.prevText.innerText = '';
}
}
}
const calculator = new Calculator(prevText, currentText);
numberBtn.forEach((btn) => {
btn.addEventListener('click', () => {
calculator.appendNumber(btn.innerText);
calculator.updateDisplay();
});
});
operationBtn.forEach((btn) => {
btn.addEventListener('click', () => {
calculator.chooseOperation(btn.innerText);
// [EDIT] Dont call updateDisplay, because u havent typed number yet (only "-")
if(!(calculator.current == '' && btn.innerText =="-")){
calculator.updateDisplay();}
// [/EDIT]
});
});
equalBtn.addEventListener('click', (btn) => {
calculator.calculate();
calculator.updateDisplay();
});
resetBtn.addEventListener('click', (btn) => {
calculator.clear();
calculator.updateDisplay();
});
delBtn.addEventListener('click', (btn) => {
calculator.delete();
calculator.updateDisplay();
});
<div class="calculator">
<div class="calculation">
<div data-prev class="prev"></div>
<div data-current class="current"></div>
<!-- <div class="display">0</div> -->
</div>
<button class="bigger reset btn" data-reset>RES</button>
<button class="bigger delete btn" data-delete>DEL</button>
<button class="nr btn" data-number>1</button>
<button class="nr btn" data-number>2</button>
<button class="nr btn" data-number>3</button>
<button class="plus operator btn" data-key='plus' data-operator>+</button>
<button class="nr btn" data-number>4</button>
<button class="nr btn" data-number>5</button>
<button class="nr btn" data-number>6</button>
<button class="minus operator btn" data-key='minus' data-operator>-</button>
<button class="nr btn" data-number>7</button>
<button class="nr btn" data-number>8</button>
<button class="nr btn" data-number>9</button>
<button class="nr btn" data-number>0</button>
<button class="bigger equal btn" data-equal>=</button>
</div>
许多计算器都有一个 +/- 按钮来切换正负值。这也允许您减去负数:2 - (-1) = 3
试试这个在线计算器看看它是如何完成的:https://www.calculatorsoup.com/calculators/math/basic.php