JS - Clicking buttons changes text of element to undefined

Question

Clicking the buttons 'hi' and 'helo' must change the content of '.admin-text' to the respective text according to the plan, but it simply changes it to 'undefined'.

var admin_text = document.querySelector('.admin-text');

var infra_btns = [document.getElementById('hi'), document.getElementById('helo')];


var infra_html = ["<p>hi</p>", "<p>helo</p>"];

for(var i = 0; i < 2; i++)
{
  infra_btns[i].addEventListener('click', function() {
    admin_text.innerHTML = infra_html[i];
  });
}

<div class="admin">
  <div class="admin-nav">
    <button class="adminbtns" id="hi">hi</button>
    <button class="adminbtns" id="helo">helo</button>
  </div>

  <div class="admin-text">

  </div>
</div>

Answer 1

You're almost there - you need to use let instead of var in your for-loop, otherwise i equals 2 in all your listener functions:

var admin_text = document.querySelector('.admin-text');

var infra_btns = [hi, helo];


var infra_html = ["<p>hi</p>", "<p>helo</p>"];

for (let i = 0; i < 2; i++) {
  infra_btns[i].addEventListener('click', function() {
    admin_text.innerHTML = infra_html[i];
  });
}

<div class="admin">
  <div class="admin-nav">
    <button class="adminbtns" id="hi">hi</button>
    <button class="adminbtns" id="helo">helo</button>
  </div>
  <div class="admin-text"></div>
</div>

This happens because variables declared using var have function scope, and i in your listener functions is passed by reference, not by value, so all your listeners share the same i. After the last iteration the last thing the for-loop does is i++, so i equals 2. So your listener tries to access infra_html[2] which is undefined because your array does not have an element with that index.

This post explains it in detail: JQuery not appending correct value to unordered list

Answer 2

The problem is in the loop you have

for(var i = 0; i < 2; i++)
{
  infra_btns[i].addEventListener('click', function() {
    admin_text.innerHTML = infra_html[i];
  });
}

When the client event handler triggers i will be 3, as the loop has ended previously. You should create a closure.

for(var i = 0; i < 2; i++)
{
   infra_btns[i].addEventListener('click', (function(index) {
      return function () {
         admin_text.innerHTML = infra_html[index];
      }
   })(i));
}

or use let to create block scoped variable as shown in other answer