Calculator display value reset after dislaying the result

Question

I've built a simple calculator using JS for the sake of practice. However, I am unable to achieve the following:

1. After my calculator displays the result and when I click on the keys to enter a new value, the new values keep concatenating with the result. How do I reset the display value?

2. How do I restrict decimal point from being entered more than ones.

Source code:

const calculator = document.querySelector(".calculator");
const displayScreen = document.querySelector(".calculatorDisplay");
const numberKeys = document.querySelectorAll(".numKeys");
const operatorKeys = document.querySelectorAll(".operator");
const equalsButton = document.querySelector(".equals");
const allClear = document.querySelector(".allClear");
const decimalButton = document.querySelector(".decimalButton");

// variables
var firstOperand;
var secondOperand;
var operator;

for(var i=0; i<numberKeys.length; i++){
    numberKeys[i].addEventListener("click", e=>{
    const firstValue = e.target.textContent;
    displayScreen.value+= firstValue;
    }); 
}

for(var i=0; i<operatorKeys.length; i++){
    operatorKeys[i].addEventListener("click", e=>{
        firstOperand = displayScreen.value;
        displayScreen.value = "";
        operator = e.target.textContent;
    });
}

equalsButton.addEventListener("click", function(){
    secondOperand = displayScreen.value;
    displayScreen.value = mathOperations();
});


allClear.addEventListener("click", function(){
    displayScreen.value ="";
});

decimalButton.addEventListener("click", e=>{
    displayScreen.value=displayScreen.value + "."
});


function mathOperations(){
    let operandOne = parseFloat(firstOperand);
    let operandTwo = parseFloat(secondOperand);
    if(operator==="+"){
        return (operandOne + operandTwo);
    }

    if(operator==="-"){
        return (operandOne - operandTwo);
    }

    if(operator==="*"){
        return  (operandOne * operandTwo);
    }

    if(operator==="/"){
        return  (operandOne / operandTwo);
    }
}

Answer 1

1. You need to declare currentValue as a global variable (next to operator for example). Then, when user clicks on equalsButton, you set currentValue to true. Then, in numberKeys handler, add a check if currentValue is true, clear displayScreen.

numberKeys[i].addEventListener("click", e => {
  if (currentValue) {
    displayScreen.value = '';
    currentValue = false;
  }
  displayScreen.value += e.target.textContent;
});

2. I thought by mistake that displayScreen is a string, but it's the input, so the check should be displayScreen.value.length

if (displayScreen.value.charAt(displayScreen.value.length - 1) !== '.') {

const calculator = document.querySelector(".calculator");
const displayScreen = document.querySelector(".calculatorDisplay");
const numberKeys = document.querySelectorAll(".numKeys");
const operatorKeys = document.querySelectorAll(".operator");
const equalsButton = document.querySelector(".equals");
const allClear = document.querySelector(".allClear");
const decimalButton = document.querySelector(".decimalButton");

let firstOperand;
let secondOperand;
let operator;
let currentValue = false;


enterNumbers();

for (var i = 0; i < operatorKeys.length; i++) {
  operatorKeys[i].addEventListener("click", e => {
    firstOperand = displayScreen.value;
    displayScreen.value = "";
    operator = e.target.textContent;
  });
}

decimalButton.addEventListener("click", e => {
  if (displayScreen.value.charAt(displayScreen.value.length - 1) !== '.') {
		displayScreen.value=displayScreen.value + ".";
	}
});

equalsButton.addEventListener("click", function() {
  currentValue = true;
  secondOperand = displayScreen.value;
  displayScreen.value = mathOperations();
});

allClear.addEventListener("click", function() {
  displayScreen.value = "";
});

function mathOperations() {
  let operandOne = parseFloat(firstOperand);
  let operandTwo = parseFloat(secondOperand);
  if (operator === "+") {
    return operandOne + operandTwo;
  }

  if (operator === "-") {
    return operandOne - operandTwo;
  }

  if (operator === "*") {
    return operandOne * operandTwo;
  }

  if (operator === "/") {
    return operandOne / operandTwo;
  }
}

function enterNumbers() {
  for (var i = 0; i < numberKeys.length; i++) {
    numberKeys[i].addEventListener("click", e => {
      if (currentValue) {
        displayScreen.value = '';
        currentValue = false;
      }
      displayScreen.value += e.target.textContent;
    });
  }
}

/* Code from freshman.tech by Ayooluwa Isaiah */

html {
  font-size: 62.5%;
  box-sizing: border-box;
}

h1 {
  text-align: center;
}

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}

.calculator {
  border: 1px solid black;
  border-radius: 25px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 400px;
}

.calculatorDisplay {
  text-align: right;
  font-size: 5rem;
  width: 100%;
  height: 80px;
  border: none;
  background-color: #252525;
  color: #fff;
  text-align: right;
  padding-right: 20px;
  padding-left: 10px;
}
button {
  height: 60px;
  border-radius: 3px;
  border: 1px solid #c4c4c4;
  background-color: transparent;
  font-size: 2rem;
  color: #333;
  background-image: linear-gradient(
    to bottom,
    transparent,
    transparent 50%,
    rgba(0, 0, 0, 0.04)
  );
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.45),
    inset 0 -1px 0 0 rgba(255, 255, 255, 0.15),
    0 1px 0 0 rgba(255, 255, 255, 0.15);
  text-shadow: 0 1px rgba(255, 255, 255, 0.4);
}

button:hover {
  background-color: #eaeaea;
}

.operator {
  color: #337cac;
}

.allClear {
  background-color: #f0595f;
  border-color: #b0353a;
  color: #fff;
}

.allClear:hover {
  background-color: #f17377;
}

.equals {
  background-color: #2e86c0;
  border-color: #337cac;
  color: #fff;
  height: 100%;
  grid-area: 2 / 4 / 6 / 5;
}

.equals:hover {
  background-color: #4e9ed4;
}

.calculatorKeys {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap: 20px;
  padding: 20px;
}

<!DOCTYPE html>
<html>

<head>
  <title>Calculator</title>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
  <h1>My Calculator</h1>
  <div class="calculator">
    <input type="text" name="display" class="calculatorDisplay">
    <div class=calculatorKeys>
      <!-- operators -->
      <button class="operator">+</button>
      <button class="operator">-</button>
      <button class="operator">*</button>
      <button class="operator">/</button>

      <button class="numKeys">7</button>
      <button class="numKeys">8</button>
      <button class="numKeys">9</button>

      <button class="numKeys">4</button>
      <button class="numKeys">5</button>
      <button class="numKeys">6</button>

      <button class="numKeys">1</button>
      <button class="numKeys">2</button>
      <button class="numKeys">3</button>

      <button class="numKeys">0</button>
      <!-- decimal-->
      <button class="decimalButton">.</button>

      <!-- All clear -->
      <button class="allClear">AC</button>

      <!-- result -->
      <button class="equals">=</button>
    </div>
    <script type="text/javascript" src="cal.js"></script>
  </div>
</body>

</html>

https://codepen.io/moshfeu/pen/RwPQKJV?editors=1000