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

【问题标题】：JavaScript Calculator - Allowing negative number to be first operandJavaScript 计算器 - 允许负数作为第一个操作数
【发布时间】：2023-03-05 07:46:01
【问题描述】：

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

【问题讨论】：

  • 你的html怎么样？...本站也有很多JS计算器的例子。他们通常很有启发性
  • 请提供足够的代码，以便我们可以运行您的示例。我可以从您的代码中猜出 HTML 看起来像什么，但 prevText 和 currentText 是什么？
  • @Iwrestledabearonce。我添加了缺少的代码。感谢您的检查。

标签： javascript calculator


【解决方案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();

【讨论】：

    【解决方案2】：

    我用 [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>

    【讨论】：

    • 谢谢你，这就是我要找的 :) ！
    • 不客气，我在[EDIT] cmets 中添加了一些解释。
    【解决方案3】：

    许多计算器都有一个 +/- 按钮，用于在正负之间切换。这也允许您减去负数：2 - (-1) = 3

    试试这个在线计算器看看它是如何完成的：https://www.calculatorsoup.com/calculators/math/basic.php

    【讨论】：

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2012-02-07
      • 1970-01-01
      • 1970-01-01
      • 2017-06-05
      相关资源
      最近更新 更多
      热门标签
      Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode