Как мне получить правильный внутренний текст HTML с Javascript? Я продолжаю получать значение undefined

Question

Я пытаюсь собрать калькулятор basi c. Вроде все сделал правильно. Я пытаюсь заставить кнопки отображаться на экране по мере их нажатия, но я продолжаю получать неопределенное значение.

Когда я console.log числа. Я получаю значение массива. Я преобразовал их в массивы и вижу правильное значение innerText, но все еще не могу отобразить их на экране калькулятора.

'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;

  });

});

.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;
}

<input type="text" class="calculator-display" />
<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>

Answer 1

number - это список узлов , а не <button>. У него нет свойства innerText.

<button>, на который только что нажали, сохраняется в переменной button.

Answer 2

Вы пропустили текстовый элемент input? и замените на этот input.value = button.innerText; внутри метода js.

fiddle для воспроизведения.

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 = button.innerText;
  })
});

.calculator-display {
  height: 40px;
  width: 85%;
  background-color: white;
  font-size: 3rem;
  color: red;
}

.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;
}

<div class="buttons">
<input type="text" class="calculator-display">
  <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>

Answer 3

Просто замените number.innerText; на button.innerText;. Также отмечен @Thomas.

'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 = button.innerText;

  });

});

.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;
}

<input type="text" class="calculator-display" />
<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>

Answer 4

Объект, из которого вы хотите получить innerText, является частью входного параметра функции, которую вызывает слушатель. Вы пытаетесь получить innerText из number, который вообще не является объектом кнопки. Попробуйте это:

numbers.forEach(button => {button.addEventListener('click', function(event){
  if (event.target) {
    input.value = event.target.innerText;
  }
})