Textbox on my calculator not taking in multiple values

  html, javascript

I am trying to make a calculator app. The problem I have run into is that when I press a button on my calculator the value of the button appears onto the textbox. But as soon as another button is pressed it erases the previous value and puts in the new one. How can I fix this so that it shows multiple values?

JavaScript Code:

var buttonValue = document.querySelectorAll('button');

for(var i = 0; i < 16; i++){
  document.querySelectorAll('button')[i].addEventListener('click', function(){
    var buttonInnerHTML = this.innerHTML
    displayText(buttonInnerHTML);

  })
}

function displayText(currentKey){
   var activeButton = document.querySelector('input')
   activeButton.value = currentKey;
 }

HTML CODE:

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
  <title>Calculator</title>
  <link rel="stylesheet" href="calulator.css">
</head>

<body>
  <div class='calulator-border'>
    <div>
      <input type="text" id="text-box" value="0">
    </div>

    <div>
      <button class='btn'>1</button>
      <button value="2">2</button>
      <button value="3">3</button>
      <button value="+">+</button>
    </div>

    <div>
      <button value="4">4</button>
      <button value="5">5</button>
      <button value="6">6</button>
      <button value="-"> - </button>
    </div>

    <div>
      <button value="7">7</button>
      <button value="8">8</button>
      <button value="9">9</button>
      <button value="*">*</button>
    </div>

    <div>
      <button value="0">0</button>
      <button value="/" class='operator-division' style=''>/</button>
      <button value="=" class='operator-euqals'>=</button>
    </div>

    <div>
      <button class='clear-button'>C</button>
    </div>
  </div>


  <script src="calulator.js" charset="utf-8"></script>
</body>

</html>

Source: Ask Javascript Questions

LEAVE A COMMENT