如何使用Javascript获得正确的内部HTML文本?我不断得到不确定的值

我正在尝试建立一个基本的计算器。我似乎做对了所有事情。我试图让按钮在被按下时显示在屏幕上,但我一直在获取未定义的值。

当我console.log数字。我得到一个数组值。我已经将它们转换为数组,并且看到了正确的innerText值,但是仍然无法在计算器显示屏上显示它们。

HTML

<div class = "buttons">
    <button  class = "operator-buttons">*</button>
    <button class = "operator-buttons">/</button>
    <button class = "operator-buttons">-</button>
    <button class = "operator-buttons">+</button>
    <button class = "number-buttons">.</button>
    <button class = "number-buttons">9</button>
    <button class = "number-buttons">8</button>
    <button class = "number-buttons">7</button>
    <button class = "number-buttons">6</button>
    <button class = "number-buttons">5</button>
    <button class = "number-buttons">4</button>
    <button class = "number-buttons">3</button>
    <button class = "number-buttons">2</button>
    <button class = "number-buttons">1</button>
    <button class = "number-buttons">0</button>
    <button class = "number-buttons" >=</button>
    <button class = "number-buttons">DELETE</button>


   </div>

CSS

.calculator-display{
  height: 200px;
  width: 85%;
  background-color:white;
  font-size: 7rem;
}
.operator-buttons{
  width: 20%;
  height: 50px;
  font-size: 2.5rem;
  margin: 0;
  padding: 10px;
}
.number-buttons{
  width: 20%;
  height: 50px;
  font-size: 2.5rem;
  margin: 0;
  padding: 10px;
}

Javascript

'use strict'

const input = document.querySelector('.calculator-display');
const number = document.querySelectorAll('.number-buttons');
const numbers = Array.from(number)


numbers.forEach(button => {button.addEventListener('click', function(){
  input.value = number.innerText;

})

});