Home Javascript Calculator, how do I clear the output when a new number is inputted?

Questions

Javascript Calculator, how do I clear the output when a new number is inputted?

September 4, 2022

I’m currently building a calculator project and I’m having a small issue. I’m able to get the output of the calculator (e.g., 2 x 2 = 4). However, if I input a new number afterwards, the number gets added to the string of the output. I would like to clear that output ONLY when a new number input is pressed (e.g., 2 x 2 = 4. I press 3, the currentDisplay will show as 43 instead of it just being "3"). Setting

currentNum = ""

after the output is created does fix this problem, however I wouldn’t be able to use the output to chain operators if I did that (e.g., 5 x 2 = 10 +2 = 12)

Here is the full code:

let currentNum = "";
let prevNum = "";
let operator = "";
const numberButtons = document.querySelectorAll(".num-btns")
const operatorButtons = document.querySelectorAll(".operator")
const equal = document.querySelector(".equal");
const dot = document.querySelector(".dot");
const clearBtn = document.querySelector(".clear");
const deleteBtn = document.querySelector(".delete");
const currentDisplay = document.querySelector(".current-number");
const prevDisplay = document.querySelector(".previous-number");


//add, subtract, multiply, and divide functions
function addFn(num1, num2) {
    return num1 + num2;
}

function subFn(num1, num2) {
    return num1 - num2;
}

function multiFn(num1, num2) {
    return num1 * num2;
}

function divFn(num1, num2) {
    return num1 / num2;
}


//operator function
function operate (a, b, c) {
    const num1 = parseFloat(a);
    const num2 = parseFloat(b);
    let output = 0;
    try {
  
      switch(c) {
        case '+':
          output = addFn(num1, num2);
          break;
  
        case 'x':
          output = multiFn(num1, num2);
          break;
  
        case '-':
          output = subFn(num1, num2);
          break;
  
       case '/':
          if (num2 === 0) {
            output = "ERROR"
          } else {
          output = divFn(num1, num2);
          }
          break;
      }
    }
    catch(e) {
      currentDisplay.textContent = ("There's an error: ", e)
    };
    currentDisplay.textContent = Math.round(output *100000) / 100000;
    currentNum = output;
}

equal.addEventListener("click", (e) => {
  if (currentNum != "" && prevNum != "") {
  operate(prevNum, currentNum, operator);
  }
  prevNum = "";
});

//button inputs for numbers and operators
numberButtons.forEach(btn => {
    btn.addEventListener("click", (e) => {
        handleNumber(e.target.textContent);
    });
});

function handleNumber(number) {
        currentNum += number;
        currentDisplay.textContent = currentNum;
}

operatorButtons.forEach((btn) => {
  btn.addEventListener("click", (e) => {
    handleOperator(e.target.textContent);
  });
});

function handleOperator(op) {
  if (currentNum != "") {
    operator = op
    prevNum = currentNum
    prevDisplay.textContent = prevNum + " " + operator;
    currentNum = ""
    currentDisplay.textContent = "";
  }
}

function addDot() {
  if (!currentNum.includes(".")) {
    currentNum += ".";
    currentDisplay.textContent = currentNum;
  }
}

dot.addEventListener("click", () => {
  addDot();
})

//clear button
function reset() {
  currentDisplay.textContent = "";
  prevDisplay.textContent = "";
  currentNum = "";
  prevNum = "";
}

clearBtn.addEventListener("click", reset);

//delete button
function delNumber() {
  currentDisplay.textContent = currentDisplay.textContent
  .toString()
  .slice(0, -1);
  currentNum = currentDisplay.textContent;
}

deleteBtn.addEventListener("click", delNumber);

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Calculator</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <div class="display">
        <div class="previous-number">
        </div>
        <div class="current-number"></div>
    </div>
    <div class="btns">
        <div>
            <button class="clear">AC</button>
            <button class="delete">DEL</button>
        </div>
        <div class="row1">
            <div class="num-btns1">
                <button class="num-btns">7</button>
                <button class="num-btns">8</button>
                <button class="num-btns">9</button>
                <button class="operator">/</button>
            </div>
            <div class="row2">
                <button class="num-btns">4</button>
                <button class="num-btns">5</button>
                <button class="num-btns">6</button>
                <button class="operator">x</button>
            </div>
            <div class="row3">
                <button class="num-btns">1</button>
                <button class="num-btns">2</button>
                <button class="num-btns">3</button>
                <button class="operator">-</button>
            </div>
            <div class="row4">
                <button class="dot">.</button>
                <button class="num-btns">0</button>
                <button class="equal">=</button>
                <button class="operator">+</button>
            </div>
        </div>
    </div>
</body>
<script src="./script.js"></script>
</html>

>Solution :

When the = button is clicked, set a variable to remember that the next number input should clear the previous number. (Then remove this catch once an operator button is clicked).

let currentNum = "";
let prevNum = "";
let operator = "";
let clearOnNextNum = false;
const numberButtons = document.querySelectorAll(".num-btns")
const operatorButtons = document.querySelectorAll(".operator")
const equal = document.querySelector(".equal");
const dot = document.querySelector(".dot");
const clearBtn = document.querySelector(".clear");
const deleteBtn = document.querySelector(".delete");
const currentDisplay = document.querySelector(".current-number");
const prevDisplay = document.querySelector(".previous-number");


//add, subtract, multiply, and divide functions
function addFn(num1, num2) {
    return num1 + num2;
}

function subFn(num1, num2) {
    return num1 - num2;
}

function multiFn(num1, num2) {
    return num1 * num2;
}

function divFn(num1, num2) {
    return num1 / num2;
}


//operator function
function operate (a, b, c) {
    const num1 = parseFloat(a);
    const num2 = parseFloat(b);
    let output = 0;
    try {
  
      switch(c) {
        case '+':
          output = addFn(num1, num2);
          break;
  
        case 'x':
          output = multiFn(num1, num2);
          break;
  
        case '-':
          output = subFn(num1, num2);
          break;
  
       case '/':
          if (num2 === 0) {
            output = "ERROR"
          } else {
          output = divFn(num1, num2);
          }
          break;
      }
    }
    catch(e) {
      currentDisplay.textContent = ("There's an error: ", e)
    };
    currentDisplay.textContent = Math.round(output *100000) / 100000;
    currentNum = output;
    clearOnNextNum = true;
}

equal.addEventListener("click", (e) => {
  if (currentNum != "" && prevNum != "") {
  operate(prevNum, currentNum, operator);
  }
  prevNum = "";
});

//button inputs for numbers and operators
numberButtons.forEach(btn => {
    btn.addEventListener("click", (e) => {
        handleNumber(e.target.textContent);
    });
});

function handleNumber(number) {
        if (clearOnNextNum) {
            clearOnNextNum = false;
            currentNum = "";
        }
        currentNum += number;
        currentDisplay.textContent = currentNum;
}

operatorButtons.forEach((btn) => {
  btn.addEventListener("click", (e) => {
    handleOperator(e.target.textContent);
  });
});

function handleOperator(op) {
  clearOnNextNum = false;
  if (currentNum != "") {
    operator = op
    prevNum = currentNum
    prevDisplay.textContent = prevNum + " " + operator;
    currentNum = ""
    currentDisplay.textContent = "";
  }
}

function addDot() {
  clearOnNextNum = false;
  if (!currentNum.includes(".")) {
    currentNum += ".";
    currentDisplay.textContent = currentNum;
  }
}

dot.addEventListener("click", () => {
  addDot();
})

//clear button
function reset() {
  currentDisplay.textContent = "";
  prevDisplay.textContent = "";
  currentNum = "";
  prevNum = "";
}

clearBtn.addEventListener("click", reset);

//delete button
function delNumber() {
  currentDisplay.textContent = currentDisplay.textContent
  .toString()
  .slice(0, -1);
  currentNum = currentDisplay.textContent;
}

deleteBtn.addEventListener("click", delNumber);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Calculator</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <div class="display">
        <div class="previous-number">
        </div>
        <div class="current-number"></div>
    </div>
    <div class="btns">
        <div>
            <button class="clear">AC</button>
            <button class="delete">DEL</button>
        </div>
        <div class="row1">
            <div class="num-btns1">
                <button class="num-btns">7</button>
                <button class="num-btns">8</button>
                <button class="num-btns">9</button>
                <button class="operator">/</button>
            </div>
            <div class="row2">
                <button class="num-btns">4</button>
                <button class="num-btns">5</button>
                <button class="num-btns">6</button>
                <button class="operator">x</button>
            </div>
            <div class="row3">
                <button class="num-btns">1</button>
                <button class="num-btns">2</button>
                <button class="num-btns">3</button>
                <button class="operator">-</button>
            </div>
            <div class="row4">
                <button class="dot">.</button>
                <button class="num-btns">0</button>
                <button class="equal">=</button>
                <button class="operator">+</button>
            </div>
        </div>
    </div>
</body>
<script src="./script.js"></script>