JavaScript for loop innerHTML returning as undefined

Question

I have been racking my brain all morning about this. In my HTML code I have a list containing letters a - j and want to console log the letter when it is clicked.

I have created a for loop to run through the nodelist and I can get the script to console log out the number of the element that is being clicked but as soon as I try and get the innerHTML or anything like that it returns undefined.

But when I just type el[3].innerHTML for example into the console it returns the letter I want.

Please help me understand why just because it's going through a for loop does it make it undefined?

I'm not just looking for the solution but also to learn why it's happening so I can become a better coder.

Thanks!

Code:

var list = document.getElementsByTagName('ul')[0];
var el = list.getElementsByTagName('li');

for(var i = 0; i < el.length; i++ ) {
  el[i].addEventListener('click', function(f) {
    return function(event) {
      event.preventDefault();
      console.log(f.innerHTML);
    }
  }(i));
}

Answer 1

You miss name of variable at :

console.log(this.innerHTML);

var list = document.getElementsByTagName('ul')[0];
var el = list.getElementsByTagName('li');

console.log(el)

  for(var i = 0; i < el.length; i++ ) {
  el[i].addEventListener("click",function(f){

    return function(event){
        event.preventDefault();
        console.log(this.innerHTML);
    };
  }(i));
}

<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>

Answer 2

When you pass i as your argument into the function, f takes on the value of i so when you try to get f.innerHTML you're attempting to get the HTML from an integer, rather than from the element that was clicked.

You can use this to target the element that was clicked. Here is a working example:

var list = document.getElementsByTagName('ul')[0];
var el = list.getElementsByTagName('li');

  for(var i = 0; i < el.length; i++ ) {
  el[i].addEventListener("click",function(f){

    return function(event){
        event.preventDefault();
        console.log(this.innerHTML);
    };
  }(i));
}

<ul>List
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>

Edited with corrected information thanks to @Teemu.