How do I get the correct Inner HTML text with Javascript? I keep on getting a value of undefined

Question

I am trying to build a basic calculator. I seem to have done everything right. I am trying to get the buttons to show up on the screen as they are being pressed but I keep on getting an undefined value.

When I console.log the numbers. I get an array value. I have converted them to arrays and I see the correct innerText value but I still can't get them to display on my calculator display.

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

@RushabhWadkar — Stackoverflow supports inline live demos. There's no need to involve third party hosting. — Quentin, May 09 '20 at 10:46
Did you mean `button.innerText` instead of `number.innerText`? — Thomas, May 09 '20 at 10:48

score 1 · Answer 1 · answered May 09 '20 at 10:48

1

number is a node list, not an <button>. It doesn't have an innerText property.

The <button> that was just clicked on is stored in the button variable.

answered May 09 '20 at 10:48

Quentin

914,110
126
1,211
1,335

Thanks for pointing this out to me. I changed the number.innerText to button.innerText and it worked. – Chinomso Johnson May 09 '20 at 12:56

score 0 · Answer 2 · answered May 09 '20 at 10:51

The object you want the innerText from is part of the input parameter to the function the listener calls. You are trying to get innerText from number which is not a button object at all. Try this:

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

score 0 · Accepted Answer · answered May 09 '20 at 10:55

Just replace number.innerText; with button.innerText;. Pointed out by @Thomas also.

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

Manjuboyz · Answer 4 · 2020-05-09T11:02:49.827

You missed the input text element? and replace to this input.value = button.innerText; inside the js method.

fiddle to playaround.

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>

How do I get the correct Inner HTML text with Javascript? I keep on getting a value of undefined

4 Answers4