Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Kristian Woods
23,414 PointsWhy can't I push variables into a Global array from an addEventListener?
I'm trying to push a newly created object into an array when the user clicks a button. But the array keeps coming back empty when I console.log it....how come?
class Member {
constructor(name, membership) {
this.name = name;
this.membership = membership;
}
}
let userDatabase = [];
btn.addEventListener('click', () => {
if(inputField.value == '') {
alert('Enter name');
} else {
let ddmV = document.querySelector('#dropdownMenu').value;
let memberName = inputField.value;
let newMember = new Member(memberName, ddmV);
userDatabase.push(newMember);
console.log(newMember);
inputField.value = '';
}
});
for(user of userDatabase) {
console.log(user);
}
2 Answers
Alexander La Bianca
15,960 PointsMy array was not empty when I tried your example. Make sure to log out your user database in the correct place as the way you have it right now it will be empty when you run the program. That is because the button click is async so the program will just keep running and log the empty array. However, you are actually pushing to the array. You can verify if you log the array inside the event listener of the click event.
Kristian Woods
23,414 PointsAlexander, thank you! Your explanation was great. Everyday is a school day
Kristian Woods
23,414 PointsKristian Woods
23,414 PointsHey, Alexander, thanks for getting back to me. What do you mean that the button click is async though?
Kristian Woods
23,414 PointsKristian Woods
23,414 PointsMy intent was to push items to an array in the global scope then access those items OUTSIDE the event handler. Why can't I access the the array items outside the event handler?
Thanks
Alexander La Bianca
15,960 PointsAlexander La Bianca
15,960 PointsHey Kristian, You can access them outside of your listener, however, in your case you are looping over the 'userDatabase' before even populating it. which is why they are empty when you log them.
You are correctly pushing into them there is nothing magical going on. javascript does not always run from top to bottom. In your case, the moment you load the page it runs the code you provided. However, the code inside the event listener is not run yet (hence it is asynchronous) as javascript does not know when someone clicks the button. So the code just keeps running and logs the userDatabase in your for loop. But at that point it is still empty. It does not fill up until you actually click the button which is what you intended so nothing wrong there.
As I said, if you put the for loop inside the listenr, you will see that the list is updating as you expect. You are just not logging it out at the right moment.