Trying to make sense of "this" in my javascript code (one thing works, the other doesn't)

Question

I've been trying to learn javascript by refactoring some Jquery examples in a book into javascript. In the following code I add a click listener to a tab and make it change to active when the user clicks on the tab.

var tabs = document.querySelectorAll(".tabs a span");
var content = document.querySelectorAll("main .content li");

for (var tabNumber = 0; tabNumber <= 2; tabNumber++) {
  tabs[tabNumber].addEventListener("click", function (event) {
    
    for (var i = 0; i < tabs.length; i++) {
      tabs[i].classList.remove("active");
    }
    tabs[tabNumber].classList.add("active");
    for (var i = 0; i < content.length; i++) {
      content[i].innerHTML = "";
    }
    event.preventDefault();
  });
}

This returns an undefined error when I run it. However, I tried replacing tabs[tabNumber].classList.add("active") with this.classList.add("active") and it worked.

Why doesn't the previous code work? As far as I can see they are referring to the same thing, and tabs[tabNumber] should work since at that point in the code it is tabs[0].

Answer 1

If use this, I think it's better and a more polished solution. If you still want to use tabNumber, it's probably evaluating to 3 in every click callback, because it's the number after the last iteration, and you don't have a tabs[3] position.

So, you just have to make a closure of the tabNumber variable.