JavaScript 计算器 - 允许负数作为第一个操作数

Question

我正在开发一个基本的 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>

Answer 1

您可以在 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();