How to add, subtract, multiply and divide two or more negative numbers on a Javascript calculator

Question

I am new to Javascript and built a basic calculator. I want to add a function that allows me to input negative numbers using a toggle feature. However, when I try to use it, it only makes the first number negative. Whenever I add a symbol (i.e, +,-,*,/) and try to make the following number negative by clicking the toggle button, everything is wiped, only leaving the first number with the opposite value. For a basis, the calculator should be able to do -2 - (-2) = 0. Here is my HTML, CSS and JS so you can test it out for yourself:

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>

I tried to google it, but a lot of the results either wouldn't work or would return the number as 'undefined.' Once again, I am new to javascript and the help would be very much appreciated :)

Answer 1

The issue with your toggleNumber function lies in how you're handling the toggling of negative numbers. You're essentially toggling the sign of the current value, but you're not appending anything after that. Also, you're using parseFloat(display.value) to get the current value, which might not be necessary too.

in html:

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

in 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;
  }
}

Answer 2

Your toggleNumber seems almost accurate.But it needs a bit of adjustment to work properly with negative numbers.

 function toggleNumber() {

    var currentValue = parseFloat(display.value);

   if (currentValue > 0) {
     display.value = -Math.abs(currentValue)
   } else if (currentValue < 0) {
     display.value = Math.abs(currentValue)
   } else if (display.value.charAt(display.value.length - 1) === '-') {
     // If the last character is already a negative sign, remove it
     display.value = display.value.slice(0, -1);
   } else {
      // If  an operator, insert a negative sign before it
     display.value = '-' + display.value;
   }
}