numbers fading behind the display in JS calculator

Issue

I am trying to code a simple tiny calculator. It's working fine, but the input numbers keep filling out the display even after if it's filled. I want it to stop receiving inputs once the display is full.

Please review the code if you don't get what I mean.

// defining variables for buttons
const digit0 = document.getElementById("digit0");
digit0.addEventListener("click", input);
const digit1 = document.getElementById("digit1");
digit1.addEventListener("click", input);
const digit2 = document.getElementById("digit2");
digit2.addEventListener("click", input);
const digit3 = document.getElementById("digit3");
digit3.addEventListener("click", input);
const digit4 = document.getElementById("digit4");
digit4.addEventListener("click", input);
const digit5 = document.getElementById("digit5");
digit5.addEventListener("click", input);
const digit6 = document.getElementById("digit6");
digit6.addEventListener("click", input);
const digit7 = document.getElementById("digit7");
digit7.addEventListener("click", input);
const digit8 = document.getElementById("digit8");
digit8.addEventListener("click", input);
const digit9 = document.getElementById("digit9");
digit9.addEventListener("click", input);
const digitPlus = document.getElementById("digitPlus");
digitPlus.addEventListener("click", input);
const digitMinus = document.getElementById("digitMinus");
digitMinus.addEventListener("click", input);
const digitMultiply = document.getElementById("digitMultiply");
digitMultiply.addEventListener("click", input);
const digitDivision = document.getElementById("digitDivision");
digitDivision.addEventListener("click", input);
const decimalBtn = document.getElementById("decimalBtn");
decimalBtn.addEventListener("click", input);

//Numpad and Keyboard events
document.addEventListener("keydown", (e) => {
  if (e.code === "NumpadEnter" || e.code === "Enter") {
    calculate();
  } else if (e.code === "Backspace") {
    del();
  } else if (e.code === "Delete") {
    reset();
  } else {
    input(e);
  }
});

//Variables for executing calculation(equal button) and clearing the results
const digitEquals = document.getElementById("digitEquals");
digitEquals.addEventListener("click", calculate);
const resetBtn = document.getElementById("resetBtn");
resetBtn.addEventListener("click", reset);
const clearBtn = document.getElementById("clearBtn");
clearBtn.addEventListener("click", del);
const display = document.getElementById("display");
let displayCurrentResult = "";

//input function for activating the buttons
function input(e) {
  let inputValue = "";

  if (e.type === "click") {
    inputValue = e.target.innerText;
  } else {
    if (e.key === "0") {
      inputValue = "0";
    } else if (e.key === "1") {
      inputValue = "1";
    } else if (e.key === "2") {
      inputValue = "2";
    } else if (e.key === "3") {
      inputValue = "3";
    } else if (e.key === "4") {
      inputValue = "4";
    } else if (e.key === "5") {
      inputValue = "5";
    } else if (e.key === "6") {
      inputValue = "6";
    } else if (e.key === "7") {
      inputValue = "7";
    } else if (e.key === "8") {
      inputValue = "8";
    } else if (e.key === "9") {
      inputValue = "9";
    } else if (e.key === "+") {
      inputValue = "+";
    } else if (e.key === "-") {
      inputValue = "-";
    } else if (e.key === "*") {
      inputValue = "*";
    } else if (e.key === "/") {
      inputValue = "/";
    } else if (e.key === "=") {
      inputValue = "=";
    } else if (e.key === ".") {
      inputValue = ".";
    }
  }
  if (
    (displayCurrentResult.substring(-1) === "*" ||
      displayCurrentResult.substring(-1) === "/" ||
      displayCurrentResult.substring(-1) === "-" ||
      displayCurrentResult.substring(-1) === "+") &&
    (inputValue === "*" ||
      inputValue === "/" ||
      inputValue === "-" ||
      inputValue === "+")
  ) {
    displayCurrentResult = displayCurrentResult.slice(0, -1) + inputValue;
  } else {
    displayCurrentResult += inputValue;
  }
  display.innerText = commaSeparator(displayCurrentResult);
}

function calculate() {
  display.innerText = commaSeparator(eval(displayCurrentResult));
  displayCurrentResult = eval(displayCurrentResult).toString();
}

function reset() {
  displayCurrentResult = "";
  display.innerText = commaSeparator(displayCurrentResult);
}

function del() {
  displayCurrentResult = displayCurrentResult.substring(
    0,
    displayCurrentResult.length - 1
  );
  display.innerText = commaSeparator(displayCurrentResult);
}

function commaSeparator(x) {
  return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}

body {
  background: linear-gradient(#154b25, #4747ee) no-repeat fixed;
  display: flex;
  justify-content: center;
  margin: 100px;
  height: 100%;
}

.calc-wrapper {
  width: 15rem;
  margin: 0 auto;
}

#display {
  display: flex;
  justify-content: right;
  align-items: center;
  border: 5px solid #ee5858;
  border-top-left-radius: 30px;
  border-top-right-radius: 3px;
  height: 3.5rem;
  overflow: hidden;
  color: #0de831;
  font-family: "Comic Sans MS", sans-serif;
  font-size: 35px;
  padding-right: 5px;
  background: #525151;
  letter-spacing: 2px;
  box-shadow: 2px 2px 2px #0e0202;
}

.keys {
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: 1fr 1fr 1fr;
  border: 1px solid #e12727;
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 10px;
  text-align: center;
  align-items: center;
  vertical-align: center;
  font-size: 30px;
  background: linear-gradient(#346a9f, #6b310f);
  padding-top: 10px;
  box-shadow: 2px 2px 2px;
}

.digit {
  border: 1px solid black;
  cursor: pointer;
  border-radius: 10px;
  background-color: #826ee0;
}

.digit:hover {
  background-color: #63b8c2;
  color: white;
}

.digit:active {
  background-color: #0de831;
}

.clear:hover {
  background-color: red;
}

.ac:hover {
  background-color: orangered;
}

<div class="calc-wrapper">
  <div id="display"></div>
  <div class="keys">
    <div class="digit 1" id="digit1">1</div>
    <div class="digit 2" id="digit2">2</div>
    <div class="digit 3" id="digit3">3</div>
    <div class="digit 4" id="digit4">4</div>
    <div class="digit 5" id="digit5">5</div>
    <div class="digit 6" id="digit6">6</div>
    <div class="digit 7" id="digit7">7</div>
    <div class="digit 8" id="digit8">8</div>
    <div class="digit 9" id="digit9">9</div>
    <div class="digit +" id="digitPlus">+</div>
    <div class="digit 0" id="digit0">0</div>
    <div class="digit -" id="digitMinus">-</div>
    <div class="digit * star" id="digitMultiply">*</div>
    <div class="digit /" id="digitDivision">/</div>
    <div class="digit =" id="digitEquals">=</div>
    <div class="digit clear" id="clearBtn">C</div>
    <div class="digit ac" id="resetBtn">AC</div>
    <div class="digit . decimal" id="decimalBtn">.</div>
  </div>
</div>

Solution

What you have is very impressive!

To fix your issue you're going to want to limit the number of characters that can be added to displayCurrentResult. Now you're going to need to figure out what exactly you're wanting to do when displayCurrentResult reaches the limit, but this is how I would do it.

if (
    (displayCurrentResult.substring(-1) === "*" ||
      displayCurrentResult.substring(-1) === "/" ||
      displayCurrentResult.substring(-1) === "-" ||
      displayCurrentResult.substring(-1) === "+") &&
    (inputValue === "*" ||
      inputValue === "/" ||
      inputValue === "-" ||
      inputValue === "+")
  ) {
    displayCurrentResult = displayCurrentResult.slice(0, -1) + inputValue;
  } else if(displayCurrentResult.length >= 8) {
     // Action after limit is reached would go here
    return;
  }else {
    displayCurrentResult += inputValue;
  }
  display.innerText = commaSeparator(displayCurrentResult);
}

You would just add the code to complete whatever action you're wanting to complete in that else if() where nothing is returned. I would either stop number input 1 before what I did so you can add your operators.

Answered By - toadv1ne