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();
  });
}

`

Abdelrahman Hussien · Accepted Answer · 2020-08-01 19:26:15Z

1

use let instead of var and try

answered Aug 1, 2020 at 19:26

Abdelrahman Hussien

5052 gold badges4 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

ajesamann Over a year ago

thanks brother, this worked! any reason why? i know the scope is different on let and var but is that the reason?

Abdelrahman Hussien Over a year ago

yes mainly this the is reason, and to solve this issue before es2015 we were using closures and IIFE concepts.

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related