如何在 Javascript 计算器上对两个或多个负数进行加、减、乘、除运算

Question

我是 Javascript 新手，构建了一个基本计算器。我想添加一个功能，允许我使用切换功能输入负数。但是，当我尝试使用它时，它只会使第一个数字为负数。每当我添加一个符号（即+、-、*、/）并尝试通过单击切换按钮将后面的数字变为负数时，所有内容都会被擦除，只留下第一个数字具有相反的值。这是我的 HTML、CSS 和 JS，您可以自己测试一下：

const display = document.getElementById("display");

τ = 6.2831853071
π = 3.1415926535


function appendToDisplay(input) {
  display.value += input;
}

function clearDisplay() {
  display.value = "";
}

function calculate() {
  try {
    display.value = eval(display.value);
  } catch (error) {
    display.value = "Error";
  }
}

function toggleNumber(input) {
  var currentValue = parseFloat(display.value)

  if (currentValue > 0) {
    display.value = -Math.abs(currentValue);
    currentValue += input;
  } else if (currentValue < 0) {
    display.value = Math.abs(currentValue);
    currentValue += input;
  }

}

body {
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  /*makes it 100% in the center of page, viewport height = vh*/
  background-color: hsl(0, 0%, 95%);
}

#calculator {
  font-family: Arial, sans-serif;
  background-color: hsl(0, 0%, 15%);
  border-radius: 15px;
  max-width: 500px;
  overflow: hidden;
}

#display {
  width: 100%;
  padding: 20px;
  font-size: 5rem;
  text-align: left;
  border: none;
  background-color: hsl(0, 0%, 20%);
  color: white;
}

#keys {
  display: grid;
  /* organises everyhting in class to grid (vertical)*/
  grid-template-columns: repeat(4, 1fr);
  /*first number says num. of columns and other is frac. value(Space between buttons)*/
  gap: 10px;
  padding: 25px;
}

button {
  width: 100px;
  height: 100px;
  border-radius: 50px;
  border: none;
  background-color: hsl(0, 0%, 30%);
  color: coral;
  font-size: 3rem;
  font-weight: bold;
  cursor: pointer;
}

button:hover {
  background-color: hsl(0, 0%, 40%);
  color: aquamarine;
}

button:active {
  background-color: hsl(0, 0%, 50%);
  /*make button flash white when click for a second*/
}

.operator-btn {
  background-color: rgb(79, 56, 117);
  color: rgb(119, 183, 238);
}

.operator-btn:hover {
  background-color: rgb(111, 80, 161);
  color: rgb(255, 0, 0);
}

.operator-btn:active {
  background-color: rgb(139, 100, 201);
}

<div id="calculator">
  <input id="display" readonly>
  <!-- Cannot type anything inside inputbox-->
  <div id="keys">
    <button onclick="appendToDisplay('+')" class="operator-btn">+</button>
    <!--Onclick is a javascript function-->
    <button onclick="appendToDisplay('7')">7</button>
    <button onclick="appendToDisplay('8')">8</button>
    <button onclick="appendToDisplay('9')">9</button>
    <button onclick="appendToDisplay('-')" class="operator-btn">-</button>
    <button onclick="appendToDisplay('4')">4</button>
    <button onclick="appendToDisplay('5')">5</button>
    <button onclick="appendToDisplay('6')">6</button>
    <button onclick="appendToDisplay('*')" class="operator-btn">x</button>
    <button onclick="appendToDisplay('1')">1</button>
    <button onclick="appendToDisplay('2')">2</button>
    <button onclick="appendToDisplay('3')">3</button>
    <button onclick="appendToDisplay('/')" class="operator-btn">÷</button>
    <button onclick="appendToDisplay('0')">0</button>
    <button onclick="appendToDisplay('.')">.</button>
    <button onclick="calculate()">=</button>
    <button onclick="clearDisplay()" class="operator-btn">C</button>
    <button onclick="appendToDisplay('π')" class="operator-btn">π</button>
    <button onclick="appendToDisplay('τ')" class="operator-btn">τ</button>
    <button onclick="toggleNumber('-')" class="operator-btn">+/-</button>
  </div>
</div>

我尝试用谷歌搜索它，但很多结果要么不起作用，要么将数字返回为“未定义”。再说一次，我是 javascript 新手，非常感谢您的帮助:)

Answer 1

toggleNumber 函数的问题在于如何处理负数的切换。您本质上是在切换当前值的符号，但之后不会添加任何内容。另外，您正在使用 parseFloat(display.value) 来获取当前值，这可能也不是必需的。

在 html 中：

<button onclick="toggleNumber()" class="operator-btn">+/-</button>

在 JavaScript 中：

function toggleNumber() {
  let currentValue = display.value;

  if (currentValue.includes('-')) {
    // If the current value already has a negative sign, remove it
    display.value = currentValue.replace('-', '');
  } else {
    // If it doesn't have a negative sign, add it at the beginning
    display.value = '-' + currentValue;
  }
}