JavaScript for loop throwing me an error - looping an object array

Question

I'm trying to make content pop up with a corresponding button click. I've created an array with the content grabbed along with the button that should activate it. I then loop over this array and have the specific button clicked which should show the content that corresponds with it in the object array. However I continue to get this error: "Cannot read property 'content' of undefined". Not really sure why. Here's the code. `

var projectInfoArray = [
 { btn: $(".lm1"), content: $(".p1-info") },
 { btn: $(".lm2"), content: $(".p2-info") },
 { btn: $(".lm3"), content: $(".p3-info") },
 { btn: $(".lm4"), content: $(".p4-info") },
 { btn: $(".lm5"), content: $(".p5-info") },
];
for (var i = 0; i < projectInfoArray.length; i++) {
 projectInfoArray[i].btn.click(function () {
 projectInfoArray[i].content.fadeIn();
 });
}

`

Answer 1

use let instead of var and try

• ajesamann: thanks brother, this worked! any reason why? i know the scope is different on let and var but is that the reason?
• Abdelrahman Hussien: yes mainly this the is reason, and to solve this issue before es2015 we were using closures and IIFE concepts.